@laerdal/life-react-components 1.5.1-dev.16 → 1.5.1-dev.19
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/Tag/Tag.cjs +92 -0
- package/dist/Tag/Tag.cjs.map +1 -0
- package/dist/Tag/Tag.d.ts +9 -0
- package/dist/Tag/Tag.js +70 -0
- package/dist/Tag/Tag.js.map +1 -0
- package/dist/Tag/index.cjs +16 -0
- package/dist/Tag/index.cjs.map +1 -0
- package/dist/Tag/index.d.ts +1 -0
- package/dist/Tag/index.js +2 -0
- package/dist/Tag/index.js.map +1 -0
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/Card/Card.cjs +0 -101
- package/dist/Card/Card.cjs.map +0 -1
- package/dist/Card/Card.d.ts +0 -23
- package/dist/Card/Card.js +0 -74
- package/dist/Card/Card.js.map +0 -1
- package/dist/Card/CardBottomSection.cjs +0 -139
- package/dist/Card/CardBottomSection.cjs.map +0 -1
- package/dist/Card/CardBottomSection.d.ts +0 -22
- package/dist/Card/CardBottomSection.js +0 -109
- package/dist/Card/CardBottomSection.js.map +0 -1
- package/dist/Card/CardMiddleSection.cjs +0 -104
- package/dist/Card/CardMiddleSection.cjs.map +0 -1
- package/dist/Card/CardMiddleSection.d.ts +0 -14
- package/dist/Card/CardMiddleSection.js +0 -80
- package/dist/Card/CardMiddleSection.js.map +0 -1
- package/dist/Card/CardTopSection.cjs +0 -106
- package/dist/Card/CardTopSection.cjs.map +0 -1
- package/dist/Card/CardTopSection.d.ts +0 -17
- package/dist/Card/CardTopSection.js +0 -80
- package/dist/Card/CardTopSection.js.map +0 -1
- package/dist/Card/index.cjs +0 -52
- package/dist/Card/index.cjs.map +0 -1
- package/dist/Card/index.d.ts +0 -5
- package/dist/Card/index.js +0 -6
- package/dist/Card/index.js.map +0 -1
package/dist/Tag/Tag.cjs
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
16
|
+
var React = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
19
|
+
|
|
20
|
+
var _ = require("..");
|
|
21
|
+
|
|
22
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
+
|
|
24
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
|
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
+
|
|
30
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 24px;\n width: fit-content;\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
|
|
31
|
+
return getBackgroundColor(props.variant);
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
|
|
35
|
+
return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n ", "\n"])), function (props) {
|
|
39
|
+
return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
|
|
40
|
+
}, function (props) {
|
|
41
|
+
return props.icon ? "4px 8px 4px 0" : "4px 8px";
|
|
42
|
+
}, (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
|
|
43
|
+
|
|
44
|
+
var getBackgroundColor = function getBackgroundColor(variant) {
|
|
45
|
+
switch (variant) {
|
|
46
|
+
case 'positive':
|
|
47
|
+
return _.COLORS.correct_500;
|
|
48
|
+
|
|
49
|
+
case 'warning':
|
|
50
|
+
return _.COLORS.warning_500;
|
|
51
|
+
|
|
52
|
+
case 'critical':
|
|
53
|
+
return _.COLORS.critical_500;
|
|
54
|
+
|
|
55
|
+
case 'accent1':
|
|
56
|
+
return _.COLORS.accent1_500;
|
|
57
|
+
|
|
58
|
+
case 'accent2':
|
|
59
|
+
return _.COLORS.accent2_500;
|
|
60
|
+
|
|
61
|
+
default:
|
|
62
|
+
return _.COLORS.neutral_100;
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
var Tag = function Tag(_ref) {
|
|
67
|
+
var label = _ref.label,
|
|
68
|
+
icon = _ref.icon,
|
|
69
|
+
_ref$variant = _ref.variant,
|
|
70
|
+
variant = _ref$variant === void 0 ? 'neutral' : _ref$variant;
|
|
71
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
72
|
+
variant: variant,
|
|
73
|
+
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
|
|
74
|
+
variant: variant,
|
|
75
|
+
"data-testid": 'iconContainer',
|
|
76
|
+
children: icon
|
|
77
|
+
}), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextContainer, {
|
|
78
|
+
variant: variant,
|
|
79
|
+
icon: icon,
|
|
80
|
+
children: label
|
|
81
|
+
})]
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
Tag.propTypes = {
|
|
86
|
+
label: _propTypes.default.string,
|
|
87
|
+
icon: _propTypes.default.node,
|
|
88
|
+
variant: _propTypes.default.oneOf(['neutral', 'positive', 'warning', 'critical', 'accent1', 'accent2'])
|
|
89
|
+
};
|
|
90
|
+
var _default = Tag;
|
|
91
|
+
exports.default = _default;
|
|
92
|
+
//# sourceMappingURL=Tag.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","getBackgroundColor","variant","IconContainer","COLORS","neutral_600","white","TextContainer","icon","ComponentTextStyle","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,4LAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;;AAQA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,oMAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CANC,CAAnB;;AAUA,IAAMC,aAAa,GAAGT,0BAAOC,GAAV,yKACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CADG,EAGP,UAAAN,KAAK;AAAA,SAAGA,KAAK,CAACQ,IAAN,8BAAH;AAAA,CAHE,EAKf,0BAAmBC,qBAAmBC,IAAtC,EAA4C,IAA5C,CALe,CAAnB;;AAQA,IAAMT,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAAgC;AACzD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOE,SAAOO,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOP,SAAOQ,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOR,SAAOS,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOT,SAAOU,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOV,SAAOW,WAAd;;AAChB;AAAS,aAAOX,SAAOY,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BV,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBN,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,sBAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGM,IAAI,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEN,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJM;AADI,MADX,EAKGU,KAAK,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEhB,OAAxB;AAAiC,MAAA,IAAI,EAAEM,IAAvC;AAAA,gBACLU;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAV,EAAAA,I;AACAN,EAAAA,O,4BALuB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;eAuBxEe,G","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: availableVariants}>`\n display: flex;\n height: 24px;\n width: fit-content;\n border-radius: 2px;\n background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: availableVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n }\n`;\n\nconst TextContainer = styled.div<{variant: availableVariants, icon: React.ReactNode}>`\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: availableVariants) => {\n switch(variant){\n case 'positive': return COLORS.correct_500;\n case 'warning' : return COLORS.warning_500;\n case 'critical': return COLORS.critical_500;\n case 'accent1': return COLORS.accent1_500;\n case 'accent2': return COLORS.accent2_500;\n default: return COLORS.neutral_100;\n }\n}\n\ntype availableVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n label?: string;\n icon?: React.ReactNode;\n variant?: availableVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n return ( \n <Container variant={variant}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;"],"file":"Tag.cjs"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
declare type availableVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
|
|
3
|
+
declare type TagProps = {
|
|
4
|
+
label?: string;
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
variant?: availableVariants;
|
|
7
|
+
};
|
|
8
|
+
declare const Tag: React.FunctionComponent<TagProps>;
|
|
9
|
+
export default Tag;
|
package/dist/Tag/Tag.js
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
+
import _pt from "prop-types";
|
|
3
|
+
|
|
4
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
5
|
+
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import styled from 'styled-components';
|
|
8
|
+
import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n height: 24px;\n width: fit-content;\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
|
|
12
|
+
return getBackgroundColor(props.variant);
|
|
13
|
+
});
|
|
14
|
+
var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
|
|
15
|
+
return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
|
|
16
|
+
});
|
|
17
|
+
var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n ", "\n"])), function (props) {
|
|
18
|
+
return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
|
|
19
|
+
}, function (props) {
|
|
20
|
+
return props.icon ? "4px 8px 4px 0" : "4px 8px";
|
|
21
|
+
}, ComponentXSStyling(ComponentTextStyle.Bold, null));
|
|
22
|
+
|
|
23
|
+
var getBackgroundColor = function getBackgroundColor(variant) {
|
|
24
|
+
switch (variant) {
|
|
25
|
+
case 'positive':
|
|
26
|
+
return COLORS.correct_500;
|
|
27
|
+
|
|
28
|
+
case 'warning':
|
|
29
|
+
return COLORS.warning_500;
|
|
30
|
+
|
|
31
|
+
case 'critical':
|
|
32
|
+
return COLORS.critical_500;
|
|
33
|
+
|
|
34
|
+
case 'accent1':
|
|
35
|
+
return COLORS.accent1_500;
|
|
36
|
+
|
|
37
|
+
case 'accent2':
|
|
38
|
+
return COLORS.accent2_500;
|
|
39
|
+
|
|
40
|
+
default:
|
|
41
|
+
return COLORS.neutral_100;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
var Tag = function Tag(_ref) {
|
|
46
|
+
var label = _ref.label,
|
|
47
|
+
icon = _ref.icon,
|
|
48
|
+
_ref$variant = _ref.variant,
|
|
49
|
+
variant = _ref$variant === void 0 ? 'neutral' : _ref$variant;
|
|
50
|
+
return /*#__PURE__*/_jsxs(Container, {
|
|
51
|
+
variant: variant,
|
|
52
|
+
children: [icon && /*#__PURE__*/_jsx(IconContainer, {
|
|
53
|
+
variant: variant,
|
|
54
|
+
"data-testid": 'iconContainer',
|
|
55
|
+
children: icon
|
|
56
|
+
}), label && /*#__PURE__*/_jsx(TextContainer, {
|
|
57
|
+
variant: variant,
|
|
58
|
+
icon: icon,
|
|
59
|
+
children: label
|
|
60
|
+
})]
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
Tag.propTypes = {
|
|
65
|
+
label: _pt.string,
|
|
66
|
+
icon: _pt.node,
|
|
67
|
+
variant: _pt.oneOf(['neutral', 'positive', 'warning', 'critical', 'accent1', 'accent2'])
|
|
68
|
+
};
|
|
69
|
+
export default Tag;
|
|
70
|
+
//# sourceMappingURL=Tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","getBackgroundColor","variant","IconContainer","neutral_600","white","TextContainer","icon","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;;;AAEA,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAV,8KAKC,UAAAC,KAAK;AAAA,SAAGC,kBAAkB,CAACD,KAAK,CAACE,OAAP,CAArB;AAAA,CALN,CAAf;AAQA,IAAMC,aAAa,GAAGT,MAAM,CAACK,GAAV,sLAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CANC,CAAnB;AAUA,IAAMC,aAAa,GAAGZ,MAAM,CAACK,GAAV,2JACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACE,OAAN,KAAkB,SAAlB,GAA8BP,MAAM,CAACS,WAArC,GAAmDT,MAAM,CAACU,KAA7D;AAAA,CADG,EAGP,UAAAL,KAAK;AAAA,SAAGA,KAAK,CAACO,IAAN,8BAAH;AAAA,CAHE,EAKfV,kBAAkB,CAACD,kBAAkB,CAACY,IAApB,EAA0B,IAA1B,CALH,CAAnB;;AAQA,IAAMP,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAAgC;AACzD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOP,MAAM,CAACc,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOd,MAAM,CAACe,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOf,MAAM,CAACgB,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOhB,MAAM,CAACiB,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOjB,MAAM,CAACkB,WAAd;;AAChB;AAAS,aAAOlB,MAAM,CAACmB,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAAsC;AAAA,MAApCC,KAAoC,QAApCA,KAAoC;AAAA,MAA7BT,IAA6B,QAA7BA,IAA6B;AAAA,0BAAvBL,OAAuB;AAAA,MAAvBA,OAAuB,6BAAf,SAAe;AACnF,sBACE,MAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAAA,eACGK,IAAI,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEL,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJK;AADI,MADX,EAKGS,KAAK,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEd,OAAxB;AAAiC,MAAA,IAAI,EAAEK,IAAvC;AAAA,gBACLS;AADK,MALZ;AAAA,IADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAT,EAAAA,I;AACAL,EAAAA,O,aALuB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;AAuBvF,eAAea,GAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: availableVariants}>`\n display: flex;\n height: 24px;\n width: fit-content;\n border-radius: 2px;\n background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: availableVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n }\n`;\n\nconst TextContainer = styled.div<{variant: availableVariants, icon: React.ReactNode}>`\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: availableVariants) => {\n switch(variant){\n case 'positive': return COLORS.correct_500;\n case 'warning' : return COLORS.warning_500;\n case 'critical': return COLORS.critical_500;\n case 'accent1': return COLORS.accent1_500;\n case 'accent2': return COLORS.accent2_500;\n default: return COLORS.neutral_100;\n }\n}\n\ntype availableVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = {\n label?: string;\n icon?: React.ReactNode;\n variant?: availableVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral'}) => {\n return ( \n <Container variant={variant}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;"],"file":"Tag.js"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "Tag", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _Tag.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
var _Tag = _interopRequireDefault(require("./Tag"));
|
|
16
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Tag/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as Tag } from './Tag';"],"file":"index.cjs"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Tag } from './Tag';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Tag/index.ts"],"names":["default","Tag"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAApB,QAA+B,OAA/B","sourcesContent":["export { default as Tag } from './Tag';"],"file":"index.js"}
|
package/dist/index.cjs
CHANGED
|
@@ -446,15 +446,15 @@ Object.keys(_SegmentControl).forEach(function (key) {
|
|
|
446
446
|
});
|
|
447
447
|
});
|
|
448
448
|
|
|
449
|
-
var
|
|
449
|
+
var _Tag = require("./Tag");
|
|
450
450
|
|
|
451
|
-
Object.keys(
|
|
451
|
+
Object.keys(_Tag).forEach(function (key) {
|
|
452
452
|
if (key === "default" || key === "__esModule") return;
|
|
453
|
-
if (key in exports && exports[key] ===
|
|
453
|
+
if (key in exports && exports[key] === _Tag[key]) return;
|
|
454
454
|
Object.defineProperty(exports, key, {
|
|
455
455
|
enumerable: true,
|
|
456
456
|
get: function get() {
|
|
457
|
-
return
|
|
457
|
+
return _Tag[key];
|
|
458
458
|
}
|
|
459
459
|
});
|
|
460
460
|
});
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Tag';"],"file":"index.cjs"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd;AACA,cAAc,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd;AACA,cAAc,OAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Tag';"],"file":"index.js"}
|
package/package.json
CHANGED
package/dist/Card/Card.cjs
DELETED
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports.default = exports.InteractionType = exports.CardTopLevelContainer = void 0;
|
|
11
|
-
|
|
12
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
-
|
|
14
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
-
|
|
16
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
-
|
|
18
|
-
var React = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
21
|
-
|
|
22
|
-
var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
|
|
23
|
-
|
|
24
|
-
var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
|
|
25
|
-
|
|
26
|
-
var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
|
|
27
|
-
|
|
28
|
-
var _ = require("..");
|
|
29
|
-
|
|
30
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
31
|
-
|
|
32
|
-
var _templateObject;
|
|
33
|
-
|
|
34
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
35
|
-
|
|
36
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
|
-
|
|
38
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
39
|
-
|
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
41
|
-
|
|
42
|
-
var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border-width: 0px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ", "\n"])), _.COLORS.white, function (props) {
|
|
43
|
-
return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border-width: 0px;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border-width: 0px;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }" : "";
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
exports.CardTopLevelContainer = CardTopLevelContainer;
|
|
47
|
-
var InteractionType;
|
|
48
|
-
exports.InteractionType = InteractionType;
|
|
49
|
-
|
|
50
|
-
(function (InteractionType) {
|
|
51
|
-
InteractionType[InteractionType["None"] = 0] = "None";
|
|
52
|
-
InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
|
|
53
|
-
InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
|
|
54
|
-
})(InteractionType || (exports.InteractionType = InteractionType = {}));
|
|
55
|
-
|
|
56
|
-
var Card = function Card(_ref) {
|
|
57
|
-
var _ref$interactionType = _ref.interactionType,
|
|
58
|
-
interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
|
|
59
|
-
onCardClicked = _ref.onCardClicked,
|
|
60
|
-
topSectionProps = _ref.topSectionProps,
|
|
61
|
-
middleSectionProps = _ref.middleSectionProps,
|
|
62
|
-
bottomSectionProps = _ref.bottomSectionProps,
|
|
63
|
-
disabled = _ref.disabled;
|
|
64
|
-
var rootRef = React.useRef(null);
|
|
65
|
-
|
|
66
|
-
var onCardClick = function onCardClick() {
|
|
67
|
-
if (interactionType == InteractionType.Clickable) {
|
|
68
|
-
var _rootRef$current;
|
|
69
|
-
|
|
70
|
-
if (onCardClicked) onCardClicked();
|
|
71
|
-
(_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
|
|
76
|
-
disabled: disabled,
|
|
77
|
-
ref: rootRef,
|
|
78
|
-
tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
|
|
79
|
-
interactionType: interactionType,
|
|
80
|
-
onClick: onCardClick,
|
|
81
|
-
children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
|
|
82
|
-
disabled: disabled,
|
|
83
|
-
interactionType: interactionType
|
|
84
|
-
})), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
|
|
85
|
-
disabled: disabled,
|
|
86
|
-
interactionType: interactionType
|
|
87
|
-
})), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
|
|
88
|
-
disabled: disabled,
|
|
89
|
-
interactionType: interactionType
|
|
90
|
-
}))]
|
|
91
|
-
});
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
Card.propTypes = {
|
|
95
|
-
interactionType: _propTypes.default.oneOf([0, 1, 2]).isRequired,
|
|
96
|
-
onCardClicked: _propTypes.default.func.isRequired,
|
|
97
|
-
disabled: _propTypes.default.bool.isRequired
|
|
98
|
-
};
|
|
99
|
-
var _default = Card;
|
|
100
|
-
exports.default = _default;
|
|
101
|
-
//# sourceMappingURL=Card.cjs.map
|
package/dist/Card/Card.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","React","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,oSACZC,SAAOC,KADK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,idADK;AAAA,CAXyB,CAA3B;;;IAmCKF,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACI,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,sBAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEa,WAAlL;AAAA,eACGN,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;eAgCaC,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n background-color: ${COLORS.white};\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border-width: 0px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ${props =>\n props.interactionType == InteractionType.Clickable && !props.disabled\n ? `\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border-width: 0px;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border-width: 0px;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }`\n : ``}\n`;\n\nexport enum InteractionType {\n None,\n Clickable,\n Selectable,\n}\n\nexport interface CardProps {\n interactionType: InteractionType;\n onCardClicked: () => {};\n disabled: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n interactionType = InteractionType.None,\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled\n}: CardProps) => {\n const rootRef = React.useRef<HTMLDivElement>(null);\n\n const onCardClick = () => {\n if (interactionType == InteractionType.Clickable) {\n if(onCardClicked) onCardClicked();\n rootRef.current?.blur();\n }\n };\n\n return (\n <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n </CardTopLevelContainer>\n );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}
|
package/dist/Card/Card.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { CardTopSectionProps } from './CardTopSection';
|
|
3
|
-
import { CardMiddleSectionProps } from './CardMiddleSection';
|
|
4
|
-
import { CardBottomSectionProps } from './CardBottomSection';
|
|
5
|
-
export declare const CardTopLevelContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
-
interactionType: InteractionType;
|
|
7
|
-
disabled: boolean;
|
|
8
|
-
}, never>;
|
|
9
|
-
export declare enum InteractionType {
|
|
10
|
-
None = 0,
|
|
11
|
-
Clickable = 1,
|
|
12
|
-
Selectable = 2
|
|
13
|
-
}
|
|
14
|
-
export interface CardProps {
|
|
15
|
-
interactionType: InteractionType;
|
|
16
|
-
onCardClicked: () => {};
|
|
17
|
-
disabled: boolean;
|
|
18
|
-
topSectionProps?: CardTopSectionProps;
|
|
19
|
-
middleSectionProps?: CardMiddleSectionProps;
|
|
20
|
-
bottomSectionProps?: CardBottomSectionProps;
|
|
21
|
-
}
|
|
22
|
-
declare const Card: React.FunctionComponent<CardProps>;
|
|
23
|
-
export default Card;
|
package/dist/Card/Card.js
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
3
|
-
import _pt from "prop-types";
|
|
4
|
-
|
|
5
|
-
var _templateObject;
|
|
6
|
-
|
|
7
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
8
|
-
|
|
9
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
10
|
-
|
|
11
|
-
import * as React from 'react';
|
|
12
|
-
import styled from 'styled-components';
|
|
13
|
-
import CardTopSection from './CardTopSection';
|
|
14
|
-
import CardMiddleSection from './CardMiddleSection';
|
|
15
|
-
import CardBottomSection from './CardBottomSection';
|
|
16
|
-
import { COLORS } from '..';
|
|
17
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
19
|
-
export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border-width: 0px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ", "\n"])), COLORS.white, function (props) {
|
|
20
|
-
return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border-width: 0px;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border-width: 0px;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }" : "";
|
|
21
|
-
});
|
|
22
|
-
export var InteractionType;
|
|
23
|
-
|
|
24
|
-
(function (InteractionType) {
|
|
25
|
-
InteractionType[InteractionType["None"] = 0] = "None";
|
|
26
|
-
InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
|
|
27
|
-
InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
|
|
28
|
-
})(InteractionType || (InteractionType = {}));
|
|
29
|
-
|
|
30
|
-
var Card = function Card(_ref) {
|
|
31
|
-
var _ref$interactionType = _ref.interactionType,
|
|
32
|
-
interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
|
|
33
|
-
onCardClicked = _ref.onCardClicked,
|
|
34
|
-
topSectionProps = _ref.topSectionProps,
|
|
35
|
-
middleSectionProps = _ref.middleSectionProps,
|
|
36
|
-
bottomSectionProps = _ref.bottomSectionProps,
|
|
37
|
-
disabled = _ref.disabled;
|
|
38
|
-
var rootRef = React.useRef(null);
|
|
39
|
-
|
|
40
|
-
var onCardClick = function onCardClick() {
|
|
41
|
-
if (interactionType == InteractionType.Clickable) {
|
|
42
|
-
var _rootRef$current;
|
|
43
|
-
|
|
44
|
-
if (onCardClicked) onCardClicked();
|
|
45
|
-
(_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
return /*#__PURE__*/_jsxs(CardTopLevelContainer, {
|
|
50
|
-
disabled: disabled,
|
|
51
|
-
ref: rootRef,
|
|
52
|
-
tabIndex: interactionType == InteractionType.Clickable && !disabled ? 0 : -1,
|
|
53
|
-
interactionType: interactionType,
|
|
54
|
-
onClick: onCardClick,
|
|
55
|
-
children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
|
|
56
|
-
disabled: disabled,
|
|
57
|
-
interactionType: interactionType
|
|
58
|
-
})), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
|
|
59
|
-
disabled: disabled,
|
|
60
|
-
interactionType: interactionType
|
|
61
|
-
})), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
|
|
62
|
-
disabled: disabled,
|
|
63
|
-
interactionType: interactionType
|
|
64
|
-
}))]
|
|
65
|
-
});
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
Card.propTypes = {
|
|
69
|
-
interactionType: _pt.oneOf([0, 1, 2]).isRequired,
|
|
70
|
-
onCardClicked: _pt.func.isRequired,
|
|
71
|
-
disabled: _pt.bool.isRequired
|
|
72
|
-
};
|
|
73
|
-
export default Card;
|
|
74
|
-
//# sourceMappingURL=Card.js.map
|
package/dist/Card/Card.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","CardTopLevelContainer","div","white","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAoD,kBAApD;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,SAASC,MAAT,QAAiD,IAAjD;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACM,GAAV,sRACZF,MAAM,CAACG,KADK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,idADK;AAAA,CAXyB,CAA3B;AAmCP,WAAYF,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGpB,KAAK,CAACqB,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIZ,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACG,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,MAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEX,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEY,WAAlL;AAAA,eACGL,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;AAgCF,eAAeC,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n background-color: ${COLORS.white};\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border-width: 0px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ${props =>\n props.interactionType == InteractionType.Clickable && !props.disabled\n ? `\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border-width: 0px;\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border-width: 0px;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }`\n : ``}\n`;\n\nexport enum InteractionType {\n None,\n Clickable,\n Selectable,\n}\n\nexport interface CardProps {\n interactionType: InteractionType;\n onCardClicked: () => {};\n disabled: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n interactionType = InteractionType.None,\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled\n}: CardProps) => {\n const rootRef = React.useRef<HTMLDivElement>(null);\n\n const onCardClick = () => {\n if (interactionType == InteractionType.Clickable) {\n if(onCardClicked) onCardClicked();\n rootRef.current?.blur();\n }\n };\n\n return (\n <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n </CardTopLevelContainer>\n );\n};\n\nexport default Card;\n"],"file":"Card.js"}
|