@laerdal/life-react-components 1.7.0-dev.17.full → 1.7.0-dev.19.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.
- package/dist/Card/CardBottomSection.cjs +32 -16
- package/dist/Card/CardBottomSection.cjs.map +1 -1
- package/dist/Card/CardBottomSection.d.ts +10 -0
- package/dist/Card/CardBottomSection.js +15 -15
- package/dist/Card/CardBottomSection.js.map +1 -1
- package/dist/Card/CardMiddleSection.cjs +37 -11
- package/dist/Card/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/CardMiddleSection.d.ts +16 -1
- package/dist/Card/CardMiddleSection.js +28 -10
- package/dist/Card/CardMiddleSection.js.map +1 -1
- package/dist/Card/CardTopSection.cjs +21 -11
- package/dist/Card/CardTopSection.cjs.map +1 -1
- package/dist/Card/CardTopSection.d.ts +10 -0
- package/dist/Card/CardTopSection.js +10 -10
- package/dist/Card/CardTopSection.js.map +1 -1
- package/dist/Card/index.cjs +51 -3
- package/dist/Card/index.cjs.map +1 -1
- package/dist/Card/index.d.ts +3 -0
- package/dist/Card/index.js +3 -0
- package/dist/Card/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.default = void 0;
|
|
10
|
+
exports.default = exports.CardProgressContainer = exports.CardNotesContainer = exports.CardNoteRight = exports.CardNoteLeft = exports.CardButtonRowContainer = exports.CardBottomSectionContainer = exports.CardBottomDivider = exports.CardAuthorContainer = void 0;
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
@@ -29,23 +29,39 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
29
29
|
|
|
30
30
|
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; }
|
|
31
31
|
|
|
32
|
-
var
|
|
32
|
+
var CardProgressContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding: 8px 0;\n"])));
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
exports.CardProgressContainer = CardProgressContainer;
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var CardNotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 48px;\n position: relative;\n color: ", ";\n display: flex;\n flex-direction: row;\n align-items: center;\n"])), _.COLORS.neutral_500);
|
|
37
|
+
|
|
38
|
+
exports.CardNotesContainer = CardNotesContainer;
|
|
39
|
+
|
|
40
|
+
var CardAuthorContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 48px;\n\n div:first-child {\n flex-grow: 2;\n }\n\n svg, img {\n width: 80px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n\n ", "\n"])), function (props) {
|
|
37
41
|
return props.disabled ? "\n color: ".concat(_.COLORS.neutral_300, ";\n svg, img {\n filter: grayscale(100%);\n }\n \n ") : '';
|
|
38
42
|
});
|
|
39
43
|
|
|
40
|
-
|
|
44
|
+
exports.CardAuthorContainer = CardAuthorContainer;
|
|
45
|
+
|
|
46
|
+
var CardBottomDivider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n width: 100%;\n"])), _.COLORS.neutral_100);
|
|
47
|
+
|
|
48
|
+
exports.CardBottomDivider = CardBottomDivider;
|
|
49
|
+
|
|
50
|
+
var CardNoteLeft = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])));
|
|
51
|
+
|
|
52
|
+
exports.CardNoteLeft = CardNoteLeft;
|
|
53
|
+
|
|
54
|
+
var CardNoteRight = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])));
|
|
55
|
+
|
|
56
|
+
exports.CardNoteRight = CardNoteRight;
|
|
41
57
|
|
|
42
|
-
var
|
|
58
|
+
var CardButtonRowContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ", ";\n }\n"])), _.COLORS.neutral_100, _.COLORS.neutral_600);
|
|
43
59
|
|
|
44
|
-
|
|
60
|
+
exports.CardButtonRowContainer = CardButtonRowContainer;
|
|
45
61
|
|
|
46
|
-
var
|
|
62
|
+
var CardBottomSectionContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n"])));
|
|
47
63
|
|
|
48
|
-
|
|
64
|
+
exports.CardBottomSectionContainer = CardBottomSectionContainer;
|
|
49
65
|
|
|
50
66
|
var CardBottomSection = function CardBottomSection(_ref) {
|
|
51
67
|
var progressLevel = _ref.progressLevel,
|
|
@@ -61,8 +77,8 @@ var CardBottomSection = function CardBottomSection(_ref) {
|
|
|
61
77
|
actions = _ref.actions,
|
|
62
78
|
disabled = _ref.disabled;
|
|
63
79
|
var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
|
|
64
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
65
|
-
children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
80
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
|
|
81
|
+
children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardProgressContainer, {
|
|
66
82
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgress, {
|
|
67
83
|
size: _.Size.Small,
|
|
68
84
|
type: progressType,
|
|
@@ -70,26 +86,26 @@ var CardBottomSection = function CardBottomSection(_ref) {
|
|
|
70
86
|
value: progressLevel,
|
|
71
87
|
max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
|
|
72
88
|
})
|
|
73
|
-
}), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
74
|
-
children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
89
|
+
}), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNotesContainer, {
|
|
90
|
+
children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNoteLeft, {
|
|
75
91
|
children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
|
|
76
92
|
color: _.COLORS.neutral_500,
|
|
77
93
|
textStyle: _.ComponentTextStyle.Bold,
|
|
78
94
|
children: noteLeft
|
|
79
95
|
})]
|
|
80
|
-
}), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
96
|
+
}), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardNoteRight, {
|
|
81
97
|
children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
|
|
82
98
|
color: _.COLORS.neutral_500,
|
|
83
99
|
textStyle: _.ComponentTextStyle.Bold,
|
|
84
100
|
children: noteRight
|
|
85
101
|
})]
|
|
86
102
|
})]
|
|
87
|
-
}), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
103
|
+
}), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardAuthorContainer, {
|
|
88
104
|
disabled: disabled,
|
|
89
105
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
|
|
90
106
|
children: authorName
|
|
91
107
|
}), logo]
|
|
92
|
-
}), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
108
|
+
}), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardButtonRowContainer, {
|
|
93
109
|
children: actions.map(function (x) {
|
|
94
110
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
95
111
|
disabled: disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["CardProgressContainer","styled","div","CardNotesContainer","COLORS","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n icon: React.ReactNode;\n onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n progressLevel?: number;\n progressMax?: number;\n progressType?: LinearProgressType;\n\n noteLeft?: string;\n noteLeftIcon?: React.ReactNode;\n noteRight?: string;\n noteRightIcon?: React.ReactNode;\n \n authorName?: string;\n actions?: ActionItem[];\n logo?: React.ReactNode;\n disabled: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n height: 48px;\n position: relative;\n color: ${COLORS.neutral_500};\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{disabled: boolean}>`\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 48px;\n\n div:first-child {\n flex-grow: 2;\n }\n\n svg, img {\n width: 80px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n\n ${props => props.disabled ? `\n color: ${COLORS.neutral_300};\n svg, img {\n filter: grayscale(100%);\n }\n \n ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\n position: absolute;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nexport const CardNoteRight = styled.div`\n position: absolute;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nexport const CardButtonRowContainer = 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\nexport const CardBottomSectionContainer = styled.div`\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n progressLevel,\n progressMax,\n progressType = LinearProgressType.Line,\n noteLeft,\n noteLeftIcon,\n noteRight,\n noteRightIcon,\n authorName,\n logo,\n actions,\n disabled\n}: CardBottomSectionProps) => {\n\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n return (\n <CardBottomSectionContainer>\n {haveAtLeastSomething && <CardBottomDivider />}\n {progressLevel != undefined && <CardProgressContainer>\n <LinearProgress size={Size.Small}\n type={progressType}\n variant={LinearProgressVariant.Normal}\n value={progressLevel}\n max={progressMax ?? progressLevel} />\n </CardProgressContainer>}\n\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n {(noteLeft || noteLeftIcon) && (\n <CardNoteLeft>\n {noteLeftIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n </CardNoteLeft>\n )}\n {(noteRight || noteRightIcon) && (\n <CardNoteRight>\n {noteRightIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n </CardNoteRight>\n )}\n </CardNotesContainer>}\n\n {(authorName || logo) && <CardAuthorContainer disabled={disabled}>\n <ComponentXXS>{authorName}</ComponentXXS>\n {logo}\n </CardAuthorContainer>}\n\n {actions && <CardButtonRowContainer>\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 </CardButtonRowContainer>}\n </CardBottomSectionContainer>\n );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}
|
|
@@ -17,5 +17,15 @@ export interface CardBottomSectionProps {
|
|
|
17
17
|
logo?: React.ReactNode;
|
|
18
18
|
disabled: boolean;
|
|
19
19
|
}
|
|
20
|
+
export declare const CardProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
21
|
+
export declare const CardNotesContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
|
+
export declare const CardAuthorContainer: import("styled-components").StyledComponent<"div", any, {
|
|
23
|
+
disabled: boolean;
|
|
24
|
+
}, never>;
|
|
25
|
+
export declare const CardBottomDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
26
|
+
export declare const CardNoteLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
27
|
+
export declare const CardNoteRight: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
28
|
+
export declare const CardButtonRowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
29
|
+
export declare const CardBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
30
|
declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
|
|
21
31
|
export default CardBottomSection;
|
|
@@ -9,16 +9,16 @@ import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgres
|
|
|
9
9
|
import { IconButton } from '../Button';
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
12
|
+
export var CardProgressContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 8px 0;\n"])));
|
|
13
|
+
export var CardNotesContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 48px;\n position: relative;\n color: ", ";\n display: flex;\n flex-direction: row;\n align-items: center;\n"])), COLORS.neutral_500);
|
|
14
|
+
export var CardAuthorContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 48px;\n\n div:first-child {\n flex-grow: 2;\n }\n\n svg, img {\n width: 80px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n\n ", "\n"])), function (props) {
|
|
15
15
|
return props.disabled ? "\n color: ".concat(COLORS.neutral_300, ";\n svg, img {\n filter: grayscale(100%);\n }\n \n ") : '';
|
|
16
16
|
});
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var
|
|
17
|
+
export var CardBottomDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n width: 100%;\n"])), COLORS.neutral_100);
|
|
18
|
+
export var CardNoteLeft = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])));
|
|
19
|
+
export var CardNoteRight = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])));
|
|
20
|
+
export var CardButtonRowContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ", ";\n }\n"])), COLORS.neutral_100, COLORS.neutral_600);
|
|
21
|
+
export var CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n"])));
|
|
22
22
|
|
|
23
23
|
var CardBottomSection = function CardBottomSection(_ref) {
|
|
24
24
|
var progressLevel = _ref.progressLevel,
|
|
@@ -34,8 +34,8 @@ var CardBottomSection = function CardBottomSection(_ref) {
|
|
|
34
34
|
actions = _ref.actions,
|
|
35
35
|
disabled = _ref.disabled;
|
|
36
36
|
var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
|
|
37
|
-
return /*#__PURE__*/_jsxs(
|
|
38
|
-
children: [haveAtLeastSomething && /*#__PURE__*/_jsx(
|
|
37
|
+
return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
|
|
38
|
+
children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardProgressContainer, {
|
|
39
39
|
children: /*#__PURE__*/_jsx(LinearProgress, {
|
|
40
40
|
size: Size.Small,
|
|
41
41
|
type: progressType,
|
|
@@ -43,26 +43,26 @@ var CardBottomSection = function CardBottomSection(_ref) {
|
|
|
43
43
|
value: progressLevel,
|
|
44
44
|
max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
|
|
45
45
|
})
|
|
46
|
-
}), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(
|
|
47
|
-
children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(
|
|
46
|
+
}), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardNotesContainer, {
|
|
47
|
+
children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardNoteLeft, {
|
|
48
48
|
children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
|
|
49
49
|
color: COLORS.neutral_500,
|
|
50
50
|
textStyle: ComponentTextStyle.Bold,
|
|
51
51
|
children: noteLeft
|
|
52
52
|
})]
|
|
53
|
-
}), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(
|
|
53
|
+
}), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardNoteRight, {
|
|
54
54
|
children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
|
|
55
55
|
color: COLORS.neutral_500,
|
|
56
56
|
textStyle: ComponentTextStyle.Bold,
|
|
57
57
|
children: noteRight
|
|
58
58
|
})]
|
|
59
59
|
})]
|
|
60
|
-
}), (authorName || logo) && /*#__PURE__*/_jsxs(
|
|
60
|
+
}), (authorName || logo) && /*#__PURE__*/_jsxs(CardAuthorContainer, {
|
|
61
61
|
disabled: disabled,
|
|
62
62
|
children: [/*#__PURE__*/_jsx(ComponentXXS, {
|
|
63
63
|
children: authorName
|
|
64
64
|
}), logo]
|
|
65
|
-
}), actions && /*#__PURE__*/_jsx(
|
|
65
|
+
}), actions && /*#__PURE__*/_jsx(CardButtonRowContainer, {
|
|
66
66
|
children: actions.map(function (x) {
|
|
67
67
|
return /*#__PURE__*/_jsx(IconButton, {
|
|
68
68
|
disabled: disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","
|
|
1
|
+
{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardProgressContainer","div","CardNotesContainer","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,YAArC,EAAmDC,cAAnD,EAAmEC,kBAAnE,EAAuFC,qBAAvF,EAA8GC,IAA9G,QAA0H,IAA1H;AACA,SAASC,UAAT,QAA2B,WAA3B;;;AAuBA,OAAO,IAAMC,qBAAqB,GAAGT,MAAM,CAACU,GAAV,0FAA3B;AAIP,OAAO,IAAMC,kBAAkB,GAAGX,MAAM,CAACU,GAAV,oMAGpBT,MAAM,CAACW,WAHa,CAAxB;AASP,OAAO,IAAMC,mBAAmB,GAAGb,MAAM,CAACU,GAAV,qSAgB5B,UAAAI,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,0BACAd,MAAM,CAACe,WADP,0EAMP,EANG;AAAA,CAhBuB,CAAzB;AAyBP,OAAO,IAAMC,iBAAiB,GAAGjB,MAAM,CAACU,GAAV,qKAERT,MAAM,CAACiB,WAFC,CAAvB;AAOP,OAAO,IAAMC,YAAY,GAAGnB,MAAM,CAACU,GAAV,gQAAlB;AAcP,OAAO,IAAMU,aAAa,GAAGpB,MAAM,CAACU,GAAV,iQAAnB;AAcP,OAAO,IAAMW,sBAAsB,GAAGrB,MAAM,CAACU,GAAV,oZAMbT,MAAM,CAACiB,WANM,EAkBtBjB,MAAM,CAACqB,WAlBe,CAA5B;AAsBP,OAAO,IAAMC,0BAA0B,GAAGvB,MAAM,CAACU,GAAV,qIAAhC;;AAKP,IAAMc,iBAAkE,GAAG,SAArEA,iBAAqE,OAY7C;AAAA,MAX5BC,aAW4B,QAX5BA,aAW4B;AAAA,MAV5BC,WAU4B,QAV5BA,WAU4B;AAAA,+BAT5BC,YAS4B;AAAA,MAT5BA,YAS4B,kCATbtB,kBAAkB,CAACuB,IASN;AAAA,MAR5BC,QAQ4B,QAR5BA,QAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,SAM4B,QAN5BA,SAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,UAI4B,QAJ5BA,UAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,OAE4B,QAF5BA,OAE4B;AAAA,MAD5BpB,QAC4B,QAD5BA,QAC4B;AAE5B,MAAMqB,oBAAoB,GAAGX,aAAa,IAAIY,SAAjB,IAA8BR,QAA9B,IAA0CC,YAA1C,IAA0DC,SAA1D,IAAuEC,aAAvE,IAAwFC,UAArH;AACA,sBACE,MAAC,0BAAD;AAAA,eACGG,oBAAoB,iBAAI,KAAC,iBAAD,KAD3B,EAEGX,aAAa,IAAIY,SAAjB,iBAA8B,KAAC,qBAAD;AAAA,6BAC7B,KAAC,cAAD;AAAgB,QAAA,IAAI,EAAE9B,IAAI,CAAC+B,KAA3B;AACgB,QAAA,IAAI,EAAEX,YADtB;AAEgB,QAAA,OAAO,EAAErB,qBAAqB,CAACiC,MAF/C;AAGgB,QAAA,KAAK,EAAEd,aAHvB;AAIgB,QAAA,GAAG,EAAEC,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAiBD;AAJpC;AAD6B,MAFjC,EAUG,CAACI,QAAQ,IAAIC,YAAZ,IAA4BC,SAA5B,IAAyCC,aAA1C,kBAA4D,MAAC,kBAAD;AAAA,iBAC1D,CAACH,QAAQ,IAAIC,YAAb,kBACC,MAAC,YAAD;AAAA,mBACGA,YADH,eAEE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAE7B,MAAM,CAACW,WAA5B;AAAyC,UAAA,SAAS,EAAEV,kBAAkB,CAACsC,IAAvE;AAAA,oBAA8EX;AAA9E,UAFF;AAAA,QAFyD,EAO1D,CAACE,SAAS,IAAIC,aAAd,kBACC,MAAC,aAAD;AAAA,mBACGA,aADH,eAEE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAE/B,MAAM,CAACW,WAA5B;AAAyC,UAAA,SAAS,EAAEV,kBAAkB,CAACsC,IAAvE;AAAA,oBAA8ET;AAA9E,UAFF;AAAA,QARyD;AAAA,MAV/D,EAyBG,CAACE,UAAU,IAAIC,IAAf,kBAAwB,MAAC,mBAAD;AAAqB,MAAA,QAAQ,EAAEnB,QAA/B;AAAA,8BACvB,KAAC,YAAD;AAAA,kBAAekB;AAAf,QADuB,EAEtBC,IAFsB;AAAA,MAzB3B,EA8BGC,OAAO,iBAAI,KAAC,sBAAD;AAAA,gBACTA,OAAO,CAACM,GAAR,CAAY,UAAAC,CAAC;AAAA,4BACZ,KAAC,UAAD;AAAY,UAAA,QAAQ,EAAE3B,QAAtB;AAAgC,UAAA,OAAO,EAAC,WAAxC;AAAoD,UAAA,KAAK,EAAC,UAA1D;AAAqE,UAAA,MAAM,EAAE,gBAAC4B,CAAD,EAAO;AAACA,YAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,eAAH;AAAsBF,YAAAA,CAAC,CAACG,OAAF;AAAa,WAAxH;AAAA,oBACGH,CAAC,CAACI;AADL,UADY;AAAA,OAAb;AADS,MA9Bd;AAAA,IADF;AAwCD,CAvDD;;;AAnHErB,EAAAA,a;AACAC,EAAAA,W;AAGAG,EAAAA,Q;AACAC,EAAAA,Y;AACAC,EAAAA,S;AACAC,EAAAA,a;AAEAC,EAAAA,U;AACAE,EAAAA,O;AAfAW,IAAAA,I;AACAD,IAAAA,O;;AAeAX,EAAAA,I;AACAnB,EAAAA,Q;;AAgKF,eAAeS,iBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n icon: React.ReactNode;\n onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n progressLevel?: number;\n progressMax?: number;\n progressType?: LinearProgressType;\n\n noteLeft?: string;\n noteLeftIcon?: React.ReactNode;\n noteRight?: string;\n noteRightIcon?: React.ReactNode;\n \n authorName?: string;\n actions?: ActionItem[];\n logo?: React.ReactNode;\n disabled: boolean;\n}\n\nexport const CardProgressContainer = styled.div`\n padding: 8px 0;\n`;\n\nexport const CardNotesContainer = styled.div`\n height: 48px;\n position: relative;\n color: ${COLORS.neutral_500};\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const CardAuthorContainer = styled.div<{disabled: boolean}>`\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 48px;\n\n div:first-child {\n flex-grow: 2;\n }\n\n svg, img {\n width: 80px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n\n ${props => props.disabled ? `\n color: ${COLORS.neutral_300};\n svg, img {\n filter: grayscale(100%);\n }\n \n ` : ''}\n`;\n\nexport const CardBottomDivider = styled.div`\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n width: 100%;\n`;\n\nexport const CardNoteLeft = styled.div`\n position: absolute;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nexport const CardNoteRight = styled.div`\n position: absolute;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nexport const CardButtonRowContainer = 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\nexport const CardBottomSectionContainer = styled.div`\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n progressLevel,\n progressMax,\n progressType = LinearProgressType.Line,\n noteLeft,\n noteLeftIcon,\n noteRight,\n noteRightIcon,\n authorName,\n logo,\n actions,\n disabled\n}: CardBottomSectionProps) => {\n\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n return (\n <CardBottomSectionContainer>\n {haveAtLeastSomething && <CardBottomDivider />}\n {progressLevel != undefined && <CardProgressContainer>\n <LinearProgress size={Size.Small}\n type={progressType}\n variant={LinearProgressVariant.Normal}\n value={progressLevel}\n max={progressMax ?? progressLevel} />\n </CardProgressContainer>}\n\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\n {(noteLeft || noteLeftIcon) && (\n <CardNoteLeft>\n {noteLeftIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n </CardNoteLeft>\n )}\n {(noteRight || noteRightIcon) && (\n <CardNoteRight>\n {noteRightIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n </CardNoteRight>\n )}\n </CardNotesContainer>}\n\n {(authorName || logo) && <CardAuthorContainer disabled={disabled}>\n <ComponentXXS>{authorName}</ComponentXXS>\n {logo}\n </CardAuthorContainer>}\n\n {actions && <CardButtonRowContainer>\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 </CardButtonRowContainer>}\n </CardBottomSectionContainer>\n );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}
|
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.default = void 0;
|
|
10
|
+
exports.default = exports.CardTagsContainer = exports.CardMiddleSectionContainer = exports.CardColorBand = exports.CardCategoryContainer = void 0;
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
@@ -27,15 +27,23 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
27
27
|
|
|
28
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
29
|
|
|
30
|
-
var
|
|
30
|
+
var CardMiddleSectionContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
exports.CardMiddleSectionContainer = CardMiddleSectionContainer;
|
|
33
|
+
|
|
34
|
+
var CardColorBand = _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) {
|
|
33
35
|
return props.$color;
|
|
34
36
|
});
|
|
35
37
|
|
|
36
|
-
|
|
38
|
+
exports.CardColorBand = CardColorBand;
|
|
39
|
+
|
|
40
|
+
var CardTagsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n"])));
|
|
41
|
+
|
|
42
|
+
exports.CardTagsContainer = CardTagsContainer;
|
|
37
43
|
|
|
38
|
-
var
|
|
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
|
+
|
|
46
|
+
exports.CardCategoryContainer = CardCategoryContainer;
|
|
39
47
|
|
|
40
48
|
var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
41
49
|
var colorBandColor = _ref.colorBandColor,
|
|
@@ -44,11 +52,12 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
44
52
|
title = _ref.title,
|
|
45
53
|
description = _ref.description,
|
|
46
54
|
tags = _ref.tags,
|
|
55
|
+
row2Tags = _ref.row2Tags,
|
|
47
56
|
disabled = _ref.disabled;
|
|
48
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
49
|
-
children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
57
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardMiddleSectionContainer, {
|
|
58
|
+
children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardColorBand, {
|
|
50
59
|
$color: colorBandColor
|
|
51
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
60
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardCategoryContainer, {
|
|
52
61
|
extraTopMargin: Boolean(colorBandColor),
|
|
53
62
|
bottomMargin: Boolean(categoryIcon || categoryLabel),
|
|
54
63
|
children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
|
|
@@ -65,10 +74,22 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
65
74
|
className: "descriptionBlock",
|
|
66
75
|
color: _.COLORS.neutral_600,
|
|
67
76
|
children: description
|
|
68
|
-
}), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
77
|
+
}), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTagsContainer, {
|
|
69
78
|
children: tags.map(function (x) {
|
|
79
|
+
var _x$variant;
|
|
80
|
+
|
|
81
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
|
|
82
|
+
label: x.label,
|
|
83
|
+
variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
|
|
84
|
+
});
|
|
85
|
+
})
|
|
86
|
+
}), row2Tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTagsContainer, {
|
|
87
|
+
children: row2Tags.map(function (x) {
|
|
88
|
+
var _x$variant2;
|
|
89
|
+
|
|
70
90
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
|
|
71
|
-
label: x
|
|
91
|
+
label: x.label,
|
|
92
|
+
variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
|
|
72
93
|
});
|
|
73
94
|
})
|
|
74
95
|
})]
|
|
@@ -81,7 +102,12 @@ CardMiddleSection.propTypes = {
|
|
|
81
102
|
categoryLabel: _propTypes.default.string,
|
|
82
103
|
title: _propTypes.default.string.isRequired,
|
|
83
104
|
description: _propTypes.default.string,
|
|
84
|
-
tags: _propTypes.default.arrayOf(_propTypes.default.
|
|
105
|
+
tags: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
106
|
+
label: _propTypes.default.string.isRequired
|
|
107
|
+
})),
|
|
108
|
+
row2Tags: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
109
|
+
label: _propTypes.default.string.isRequired
|
|
110
|
+
})),
|
|
85
111
|
disabled: _propTypes.default.bool.isRequired
|
|
86
112
|
};
|
|
87
113
|
var _default = CardMiddleSection;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["
|
|
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,12 +1,27 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { TagVariants } from '..';
|
|
2
3
|
export interface CardMiddleSectionProps {
|
|
3
4
|
colorBandColor?: string;
|
|
4
5
|
categoryIcon?: React.ReactNode;
|
|
5
6
|
categoryLabel?: string;
|
|
6
7
|
title: string;
|
|
7
8
|
description?: string;
|
|
8
|
-
tags?:
|
|
9
|
+
tags?: CardTag[];
|
|
10
|
+
row2Tags?: CardTag[];
|
|
9
11
|
disabled: boolean;
|
|
10
12
|
}
|
|
13
|
+
export interface CardTag {
|
|
14
|
+
label: string;
|
|
15
|
+
variant?: TagVariants;
|
|
16
|
+
}
|
|
17
|
+
export declare const CardMiddleSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
|
+
export declare const CardColorBand: import("styled-components").StyledComponent<"div", any, {
|
|
19
|
+
$color: string;
|
|
20
|
+
}, never>;
|
|
21
|
+
export declare const CardTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
|
+
export declare const CardCategoryContainer: import("styled-components").StyledComponent<"div", any, {
|
|
23
|
+
extraTopMargin: boolean;
|
|
24
|
+
bottomMargin: boolean;
|
|
25
|
+
}, never>;
|
|
11
26
|
declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
|
|
12
27
|
export default CardMiddleSection;
|
|
@@ -8,12 +8,12 @@ import styled from 'styled-components';
|
|
|
8
8
|
import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '..';
|
|
9
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
-
var
|
|
12
|
-
var
|
|
11
|
+
export var CardMiddleSectionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
|
|
12
|
+
export var CardColorBand = 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) {
|
|
13
13
|
return props.$color;
|
|
14
14
|
});
|
|
15
|
-
var
|
|
16
|
-
var
|
|
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);
|
|
17
17
|
|
|
18
18
|
var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
19
19
|
var colorBandColor = _ref.colorBandColor,
|
|
@@ -22,11 +22,12 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
22
22
|
title = _ref.title,
|
|
23
23
|
description = _ref.description,
|
|
24
24
|
tags = _ref.tags,
|
|
25
|
+
row2Tags = _ref.row2Tags,
|
|
25
26
|
disabled = _ref.disabled;
|
|
26
|
-
return /*#__PURE__*/_jsxs(
|
|
27
|
-
children: [colorBandColor && /*#__PURE__*/_jsx(
|
|
27
|
+
return /*#__PURE__*/_jsxs(CardMiddleSectionContainer, {
|
|
28
|
+
children: [colorBandColor && /*#__PURE__*/_jsx(CardColorBand, {
|
|
28
29
|
$color: colorBandColor
|
|
29
|
-
}), /*#__PURE__*/_jsxs(
|
|
30
|
+
}), /*#__PURE__*/_jsxs(CardCategoryContainer, {
|
|
30
31
|
extraTopMargin: Boolean(colorBandColor),
|
|
31
32
|
bottomMargin: Boolean(categoryIcon || categoryLabel),
|
|
32
33
|
children: [categoryIcon, /*#__PURE__*/_jsx(ComponentS, {
|
|
@@ -43,10 +44,22 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
43
44
|
className: "descriptionBlock",
|
|
44
45
|
color: COLORS.neutral_600,
|
|
45
46
|
children: description
|
|
46
|
-
}), tags && /*#__PURE__*/_jsx(
|
|
47
|
+
}), tags && /*#__PURE__*/_jsx(CardTagsContainer, {
|
|
47
48
|
children: tags.map(function (x) {
|
|
49
|
+
var _x$variant;
|
|
50
|
+
|
|
51
|
+
return /*#__PURE__*/_jsx(Tag, {
|
|
52
|
+
label: x.label,
|
|
53
|
+
variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
|
|
54
|
+
});
|
|
55
|
+
})
|
|
56
|
+
}), row2Tags && /*#__PURE__*/_jsx(CardTagsContainer, {
|
|
57
|
+
children: row2Tags.map(function (x) {
|
|
58
|
+
var _x$variant2;
|
|
59
|
+
|
|
48
60
|
return /*#__PURE__*/_jsx(Tag, {
|
|
49
|
-
label: x
|
|
61
|
+
label: x.label,
|
|
62
|
+
variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
|
|
50
63
|
});
|
|
51
64
|
})
|
|
52
65
|
})]
|
|
@@ -59,7 +72,12 @@ CardMiddleSection.propTypes = {
|
|
|
59
72
|
categoryLabel: _pt.string,
|
|
60
73
|
title: _pt.string.isRequired,
|
|
61
74
|
description: _pt.string,
|
|
62
|
-
tags: _pt.arrayOf(_pt.
|
|
75
|
+
tags: _pt.arrayOf(_pt.shape({
|
|
76
|
+
label: _pt.string.isRequired
|
|
77
|
+
})),
|
|
78
|
+
row2Tags: _pt.arrayOf(_pt.shape({
|
|
79
|
+
label: _pt.string.isRequired
|
|
80
|
+
})),
|
|
63
81
|
disabled: _pt.bool.isRequired
|
|
64
82
|
};
|
|
65
83
|
export default CardMiddleSection;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","
|
|
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"}
|
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.default = void 0;
|
|
10
|
+
exports.default = exports.CardTopTagContainer = exports.CardTopSectionContainer = exports.CardRibbonContainer = exports.CardImg = exports.CardCheckboxContainer = void 0;
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
@@ -33,21 +33,31 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
33
33
|
|
|
34
34
|
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; }
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var CardImg = _styledComponents.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n"])));
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
exports.CardImg = CardImg;
|
|
39
39
|
|
|
40
|
-
var
|
|
40
|
+
var CardTopTagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n"])));
|
|
41
|
+
|
|
42
|
+
exports.CardTopTagContainer = CardTopTagContainer;
|
|
43
|
+
|
|
44
|
+
var CardTopSectionContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n width: 100%;\n height: 200px;\n overflow: visible;\n\n ", "\n"])), function (props) {
|
|
41
45
|
return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
|
|
42
46
|
});
|
|
43
47
|
|
|
44
|
-
|
|
48
|
+
exports.CardTopSectionContainer = CardTopSectionContainer;
|
|
49
|
+
|
|
50
|
+
var CardRibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n min-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 gap: 8px;\n\n svg {\n color: ", ";\n width: 24px;\n height: 24px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])), function (props) {
|
|
45
51
|
return props.$backgroundColor;
|
|
46
52
|
}, function (props) {
|
|
47
53
|
return props.$color;
|
|
48
54
|
});
|
|
49
55
|
|
|
50
|
-
|
|
56
|
+
exports.CardRibbonContainer = CardRibbonContainer;
|
|
57
|
+
|
|
58
|
+
var CardCheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n .checkbox-icon {\n background-color: ", ";\n }\n"])), _.COLORS.white);
|
|
59
|
+
|
|
60
|
+
exports.CardCheckboxContainer = CardCheckboxContainer;
|
|
51
61
|
|
|
52
62
|
var CardTopSection = function CardTopSection(_ref) {
|
|
53
63
|
var selected = _ref.selected,
|
|
@@ -62,11 +72,11 @@ var CardTopSection = function CardTopSection(_ref) {
|
|
|
62
72
|
highlightRibbonContentColor = _ref.highlightRibbonContentColor,
|
|
63
73
|
highlightRibbonBgColor = _ref.highlightRibbonBgColor,
|
|
64
74
|
disabled = _ref.disabled;
|
|
65
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
75
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionContainer, {
|
|
66
76
|
disabled: disabled,
|
|
67
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
77
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CardImg, {
|
|
68
78
|
src: image
|
|
69
|
-
}), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
79
|
+
}), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardCheckboxContainer, {
|
|
70
80
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
|
|
71
81
|
disabled: disabled,
|
|
72
82
|
select: function select(selected) {
|
|
@@ -74,13 +84,13 @@ var CardTopSection = function CardTopSection(_ref) {
|
|
|
74
84
|
},
|
|
75
85
|
selected: selected || false
|
|
76
86
|
})
|
|
77
|
-
}), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
87
|
+
}), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopTagContainer, {
|
|
78
88
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
|
|
79
89
|
label: tagLabel,
|
|
80
90
|
variant: tagVariant,
|
|
81
91
|
icon: tagIcon
|
|
82
92
|
})
|
|
83
|
-
}), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
93
|
+
}), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardRibbonContainer, {
|
|
84
94
|
$color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
|
|
85
95
|
$backgroundColor: disabled ? _.COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
|
|
86
96
|
children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ComponentS, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["CardImg","styled","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","COLORS","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","ComponentTextStyle","Regular"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAgBO,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,6MAAb;;;;AAQA,IAAMC,mBAAmB,GAAGF,0BAAOG,GAAV,0KAAzB;;;;AAQA,IAAMC,uBAAuB,GAAGJ,0BAAOG,GAAV,iLAMhC,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,yDAGN,EAHE;AAAA,CAN2B,CAA7B;;;;AAYA,IAAMC,mBAAmB,GAAGP,0BAAOG,GAAV,ocAEV,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACG,gBAAV;AAAA,CAFK,EAcnB,UAAAH,KAAK;AAAA,SAAIA,KAAK,CAACI,MAAV;AAAA,CAdc,CAAzB;;;;AAsBA,IAAMC,qBAAqB,GAAGV,0BAAOG,GAAV,8MAOVQ,SAAOC,KAPG,CAA3B;;;;AAWP,IAAMC,cAA4D,GAAG,SAA/DA,cAA+D,OAY4B;AAAA,MAXzBC,QAWyB,QAXzBA,QAWyB;AAAA,MAVzBC,WAUyB,QAVzBA,WAUyB;AAAA,MATzBC,KASyB,QATzBA,KASyB;AAAA,MARzBC,QAQyB,QARzBA,QAQyB;AAAA,MAPzBC,OAOyB,QAPzBA,OAOyB;AAAA,6BANzBC,UAMyB;AAAA,MANzBA,UAMyB,gCANZ,UAMY;AAAA,MALzBC,mBAKyB,QALzBA,mBAKyB;AAAA,MAJzBC,mBAIyB,QAJzBA,mBAIyB;AAAA,MAHzBC,2BAGyB,QAHzBA,2BAGyB;AAAA,MAFzBC,sBAEyB,QAFzBA,sBAEyB;AAAA,MADzBjB,QACyB,QADzBA,QACyB;AAC/F,sBACE,sBAAC,uBAAD;AAAyB,IAAA,QAAQ,EAAEA,QAAnC;AAAA,4BACE,qBAAC,OAAD;AAAS,MAAA,GAAG,EAAEU;AAAd,MADF,EAEG,CAAC,CAAC,CAACF,QAAF,IAAc,CAAC,CAACC,WAAjB,kBACC,qBAAC,qBAAD;AAAA,6BACE,qBAAC,iBAAD;AAAU,QAAA,QAAQ,EAAET,QAApB;AAA8B,QAAA,MAAM,EAAE,gBAACQ,QAAD;AAAA,iBAAuBC,WAAW,IAAIA,WAAW,CAACD,QAAD,CAAjD;AAAA,SAAtC;AAAmG,QAAA,QAAQ,EAAEA,QAAQ,IAAI;AAAzH;AADF,MAHJ,EAOG,CAACG,QAAQ,IAAIC,OAAb,kBACC,qBAAC,mBAAD;AAAA,6BACE,qBAAC,QAAD;AAAK,QAAA,KAAK,EAAED,QAAZ;AAAsB,QAAA,OAAO,EAAEE,UAA/B;AAA2C,QAAA,IAAI,EAAED;AAAjD;AADF,MARJ,EAYG,CAACE,mBAAmB,IAAIC,mBAAxB,kBACC,sBAAC,mBAAD;AAAqB,MAAA,MAAM,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAA5D;AACiB,MAAA,gBAAgB,EAAEhB,QAAQ,GAAGK,SAAOa,WAAV,GAAwBD,sBAAxB,aAAwBA,sBAAxB,cAAwBA,sBAAxB,GAAkD,EAD7F;AAAA,iBAEGH,mBAFH,EAGGC,mBAAmB,iBAClB,qBAAC,sBAAD;AAAY,QAAA,KAAK,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAlD;AAAsD,QAAA,SAAS,EAAEG,+BAAmBC,OAApF;AAAA,kBACGL;AADH,QAJJ;AAAA,MAbJ;AAAA,IADF;AA0BD,CAvCD;;;AA1EEP,EAAAA,Q;AACAC,EAAAA,W;AACAE,EAAAA,Q;AACAC,EAAAA,O;AAEAG,EAAAA,mB;AACAD,EAAAA,mB;AACAE,EAAAA,2B;AACAC,EAAAA,sB;AACAP,EAAAA,K;AACAV,EAAAA,Q;;eAyGaO,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../styles/typography';\nimport Checkbox from '../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../Tag';\n\nimport {COLORS} from '..';\n\nexport interface CardTopSectionProps {\n selected?: boolean;\n setSelected?: (arg0: boolean) => void;\n tagLabel?: string;\n tagIcon?: React.ReactNode;\n tagVariant?: TagVariants;\n highlightRibbonText?: string;\n highlightRibbonIcon?: string;\n highlightRibbonContentColor?: string;\n highlightRibbonBgColor?: string;\n image?: string;\n disabled: boolean;\n}\n\nexport const CardImg = styled.img`\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n`;\n\nexport const CardTopTagContainer = styled.div`\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 200px;\n overflow: visible;\n\n ${props => props.disabled ? `\n img, svg {\n filter: grayscale(100%);\n }` : ''}\n`;\n\nexport const CardRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n min-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 gap: 8px;\n\n svg {\n color: ${props => props.$color};\n width: 24px;\n height: 24px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nexport const CardCheckboxContainer = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n selected,\n setSelected,\n image,\n tagLabel,\n tagIcon,\n tagVariant = 'positive',\n highlightRibbonIcon,\n highlightRibbonText,\n highlightRibbonContentColor,\n highlightRibbonBgColor,\n disabled\n }: CardTopSectionProps) => {\n return (\n <CardTopSectionContainer disabled={disabled}>\n <CardImg src={image}/>\n {(!!selected || !!setSelected) && (\n <CardCheckboxContainer>\n <Checkbox disabled={disabled} select={(selected: boolean) => setSelected && setSelected(selected)} selected={selected || false}/>\n </CardCheckboxContainer>\n )}\n {(tagLabel || tagIcon) && (\n <CardTopTagContainer>\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n </CardTopTagContainer>\n )}\n {(highlightRibbonIcon || highlightRibbonText) && (\n <CardRibbonContainer $color={highlightRibbonContentColor ?? ''}\n $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n {highlightRibbonIcon}\n {highlightRibbonText && (\n <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n {highlightRibbonText}\n </ComponentS>\n )}\n </CardRibbonContainer>\n )}\n </CardTopSectionContainer>\n );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}
|
|
@@ -13,5 +13,15 @@ export interface CardTopSectionProps {
|
|
|
13
13
|
image?: string;
|
|
14
14
|
disabled: boolean;
|
|
15
15
|
}
|
|
16
|
+
export declare const CardImg: import("styled-components").StyledComponent<"img", any, {}, never>;
|
|
17
|
+
export declare const CardTopTagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
|
+
export declare const CardTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
|
|
19
|
+
disabled: boolean;
|
|
20
|
+
}, never>;
|
|
21
|
+
export declare const CardRibbonContainer: import("styled-components").StyledComponent<"div", any, {
|
|
22
|
+
$color: string;
|
|
23
|
+
$backgroundColor: string;
|
|
24
|
+
}, never>;
|
|
25
|
+
export declare const CardCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
16
26
|
declare const CardTopSection: React.FunctionComponent<CardTopSectionProps>;
|
|
17
27
|
export default CardTopSection;
|
|
@@ -11,17 +11,17 @@ import { Tag } from '../Tag';
|
|
|
11
11
|
import { COLORS } from '..';
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
14
|
+
export var CardImg = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n"])));
|
|
15
|
+
export var CardTopTagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n"])));
|
|
16
|
+
export var CardTopSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 200px;\n overflow: visible;\n\n ", "\n"])), function (props) {
|
|
17
17
|
return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
|
|
18
18
|
});
|
|
19
|
-
var
|
|
19
|
+
export var CardRibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n min-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 gap: 8px;\n\n svg {\n color: ", ";\n width: 24px;\n height: 24px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])), function (props) {
|
|
20
20
|
return props.$backgroundColor;
|
|
21
21
|
}, function (props) {
|
|
22
22
|
return props.$color;
|
|
23
23
|
});
|
|
24
|
-
var
|
|
24
|
+
export var CardCheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n .checkbox-icon {\n background-color: ", ";\n }\n"])), COLORS.white);
|
|
25
25
|
|
|
26
26
|
var CardTopSection = function CardTopSection(_ref) {
|
|
27
27
|
var selected = _ref.selected,
|
|
@@ -36,11 +36,11 @@ var CardTopSection = function CardTopSection(_ref) {
|
|
|
36
36
|
highlightRibbonContentColor = _ref.highlightRibbonContentColor,
|
|
37
37
|
highlightRibbonBgColor = _ref.highlightRibbonBgColor,
|
|
38
38
|
disabled = _ref.disabled;
|
|
39
|
-
return /*#__PURE__*/_jsxs(
|
|
39
|
+
return /*#__PURE__*/_jsxs(CardTopSectionContainer, {
|
|
40
40
|
disabled: disabled,
|
|
41
|
-
children: [/*#__PURE__*/_jsx(
|
|
41
|
+
children: [/*#__PURE__*/_jsx(CardImg, {
|
|
42
42
|
src: image
|
|
43
|
-
}), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(
|
|
43
|
+
}), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardCheckboxContainer, {
|
|
44
44
|
children: /*#__PURE__*/_jsx(Checkbox, {
|
|
45
45
|
disabled: disabled,
|
|
46
46
|
select: function select(selected) {
|
|
@@ -48,13 +48,13 @@ var CardTopSection = function CardTopSection(_ref) {
|
|
|
48
48
|
},
|
|
49
49
|
selected: selected || false
|
|
50
50
|
})
|
|
51
|
-
}), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(
|
|
51
|
+
}), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(CardTopTagContainer, {
|
|
52
52
|
children: /*#__PURE__*/_jsx(Tag, {
|
|
53
53
|
label: tagLabel,
|
|
54
54
|
variant: tagVariant,
|
|
55
55
|
icon: tagIcon
|
|
56
56
|
})
|
|
57
|
-
}), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(
|
|
57
|
+
}), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(CardRibbonContainer, {
|
|
58
58
|
$color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
|
|
59
59
|
$backgroundColor: disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
|
|
60
60
|
children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/_jsx(ComponentS, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","
|
|
1
|
+
{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","CardImg","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","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 from '../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../Tag';\n\nimport {COLORS} from '..';\n\nexport interface CardTopSectionProps {\n selected?: boolean;\n setSelected?: (arg0: boolean) => void;\n tagLabel?: string;\n tagIcon?: React.ReactNode;\n tagVariant?: TagVariants;\n highlightRibbonText?: string;\n highlightRibbonIcon?: string;\n highlightRibbonContentColor?: string;\n highlightRibbonBgColor?: string;\n image?: string;\n disabled: boolean;\n}\n\nexport const CardImg = styled.img`\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n`;\n\nexport const CardTopTagContainer = styled.div`\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 200px;\n overflow: visible;\n\n ${props => props.disabled ? `\n img, svg {\n filter: grayscale(100%);\n }` : ''}\n`;\n\nexport const CardRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n min-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 gap: 8px;\n\n svg {\n color: ${props => props.$color};\n width: 24px;\n height: 24px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nexport const CardCheckboxContainer = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n selected,\n setSelected,\n image,\n tagLabel,\n tagIcon,\n tagVariant = 'positive',\n highlightRibbonIcon,\n highlightRibbonText,\n highlightRibbonContentColor,\n highlightRibbonBgColor,\n disabled\n }: CardTopSectionProps) => {\n return (\n <CardTopSectionContainer disabled={disabled}>\n <CardImg src={image}/>\n {(!!selected || !!setSelected) && (\n <CardCheckboxContainer>\n <Checkbox disabled={disabled} select={(selected: boolean) => setSelected && setSelected(selected)} selected={selected || false}/>\n </CardCheckboxContainer>\n )}\n {(tagLabel || tagIcon) && (\n <CardTopTagContainer>\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n </CardTopTagContainer>\n )}\n {(highlightRibbonIcon || highlightRibbonText) && (\n <CardRibbonContainer $color={highlightRibbonContentColor ?? ''}\n $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n {highlightRibbonIcon}\n {highlightRibbonText && (\n <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n {highlightRibbonText}\n </ComponentS>\n )}\n </CardRibbonContainer>\n )}\n </CardTopSectionContainer>\n );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}
|
package/dist/Card/index.cjs
CHANGED
|
@@ -2,9 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
10
|
+
var _exportNames = {
|
|
11
|
+
Card: true,
|
|
12
|
+
CardBottomSection: true,
|
|
13
|
+
CardMiddleSection: true,
|
|
14
|
+
CardTopSection: true
|
|
15
|
+
};
|
|
8
16
|
Object.defineProperty(exports, "Card", {
|
|
9
17
|
enumerable: true,
|
|
10
18
|
get: function get() {
|
|
@@ -32,9 +40,49 @@ Object.defineProperty(exports, "CardTopSection", {
|
|
|
32
40
|
|
|
33
41
|
var _Card = _interopRequireDefault(require("./Card"));
|
|
34
42
|
|
|
35
|
-
var _CardBottomSection =
|
|
43
|
+
var _CardBottomSection = _interopRequireWildcard(require("./CardBottomSection"));
|
|
44
|
+
|
|
45
|
+
Object.keys(_CardBottomSection).forEach(function (key) {
|
|
46
|
+
if (key === "default" || key === "__esModule") return;
|
|
47
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
48
|
+
if (key in exports && exports[key] === _CardBottomSection[key]) return;
|
|
49
|
+
Object.defineProperty(exports, key, {
|
|
50
|
+
enumerable: true,
|
|
51
|
+
get: function get() {
|
|
52
|
+
return _CardBottomSection[key];
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
var _CardMiddleSection = _interopRequireWildcard(require("./CardMiddleSection"));
|
|
58
|
+
|
|
59
|
+
Object.keys(_CardMiddleSection).forEach(function (key) {
|
|
60
|
+
if (key === "default" || key === "__esModule") return;
|
|
61
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
62
|
+
if (key in exports && exports[key] === _CardMiddleSection[key]) return;
|
|
63
|
+
Object.defineProperty(exports, key, {
|
|
64
|
+
enumerable: true,
|
|
65
|
+
get: function get() {
|
|
66
|
+
return _CardMiddleSection[key];
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
var _CardTopSection = _interopRequireWildcard(require("./CardTopSection"));
|
|
72
|
+
|
|
73
|
+
Object.keys(_CardTopSection).forEach(function (key) {
|
|
74
|
+
if (key === "default" || key === "__esModule") return;
|
|
75
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
76
|
+
if (key in exports && exports[key] === _CardTopSection[key]) return;
|
|
77
|
+
Object.defineProperty(exports, key, {
|
|
78
|
+
enumerable: true,
|
|
79
|
+
get: function get() {
|
|
80
|
+
return _CardTopSection[key];
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
});
|
|
36
84
|
|
|
37
|
-
var
|
|
85
|
+
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); }
|
|
38
86
|
|
|
39
|
-
var
|
|
87
|
+
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; }
|
|
40
88
|
//# sourceMappingURL=index.cjs.map
|
package/dist/Card/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/Card/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export {default as Card} from './Card';\n\nexport {default as CardBottomSection} from './CardBottomSection';\nexport * from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport * from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport * from './CardTopSection';\n"],"file":"index.cjs"}
|
package/dist/Card/index.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
export { default as Card } from './Card';
|
|
2
2
|
export { default as CardBottomSection } from './CardBottomSection';
|
|
3
|
+
export * from './CardBottomSection';
|
|
3
4
|
export { default as CardMiddleSection } from './CardMiddleSection';
|
|
5
|
+
export * from './CardMiddleSection';
|
|
4
6
|
export { default as CardTopSection } from './CardTopSection';
|
|
7
|
+
export * from './CardTopSection';
|
package/dist/Card/index.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
export { default as Card } from './Card';
|
|
2
2
|
export { default as CardBottomSection } from './CardBottomSection';
|
|
3
|
+
export * from './CardBottomSection';
|
|
3
4
|
export { default as CardMiddleSection } from './CardMiddleSection';
|
|
5
|
+
export * from './CardMiddleSection';
|
|
4
6
|
export { default as CardTopSection } from './CardTopSection';
|
|
7
|
+
export * from './CardTopSection';
|
|
5
8
|
//# sourceMappingURL=index.js.map
|
package/dist/Card/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/index.tsx"],"names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAnB,QAA8B,QAA9B;
|
|
1
|
+
{"version":3,"sources":["../../src/Card/index.tsx"],"names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAnB,QAA8B,QAA9B;AAEA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQF,OAAO,IAAIG,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQH,OAAO,IAAII,cAAnB,QAAwC,kBAAxC;AACA,cAAc,kBAAd","sourcesContent":["export {default as Card} from './Card';\n\nexport {default as CardBottomSection} from './CardBottomSection';\nexport * from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport * from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport * from './CardTopSection';\n"],"file":"index.js"}
|