@laerdal/life-react-components 1.10.3-dev.3.full → 1.10.3-dev.6
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 +9 -34
- package/dist/Tag/Tag.cjs.map +1 -1
- package/dist/Tag/Tag.js +9 -34
- package/dist/Tag/Tag.js.map +1 -1
- package/package.json +1 -1
package/dist/Tag/Tag.cjs
CHANGED
|
@@ -25,7 +25,7 @@ var _ = require("..");
|
|
|
25
25
|
|
|
26
26
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
27
|
|
|
28
|
-
var _excluded = ["label", "icon", "variant"];
|
|
28
|
+
var _excluded = ["label", "icon", "variant", "className"];
|
|
29
29
|
|
|
30
30
|
var _templateObject, _templateObject2, _templateObject3;
|
|
31
31
|
|
|
@@ -37,53 +37,28 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
37
37
|
|
|
38
38
|
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; }
|
|
39
39
|
|
|
40
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ", ";\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
|
|
40
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ", ";\n border-radius: 2px;\n\n &.neutral {\n background-color: ", ";\n color: ", ";\n }\n &.positive {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n &.critical {\n background-color: ", ";\n color: ", ";\n }\n &.accent1 {\n background-color: ", ";\n color: ", ";\n }\n &.accent2 {\n background-color: ", ";\n color: ", ";\n }\n\n"])), function (props) {
|
|
41
41
|
return props.isLabelPresent ? '64px' : '';
|
|
42
|
-
},
|
|
43
|
-
return getBackgroundColor(props.variant);
|
|
44
|
-
});
|
|
42
|
+
}, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.correct_100, _.COLORS.correct_600, _.COLORS.warning_100, _.COLORS.warning_600, _.COLORS.critical_100, _.COLORS.critical_600, _.COLORS.accent1_100, _.COLORS.accent1_600, _.COLORS.accent2_100, _.COLORS.accent2_600);
|
|
45
43
|
|
|
46
|
-
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
|
|
47
|
-
return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
|
|
48
|
-
});
|
|
44
|
+
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 }\n"])));
|
|
49
45
|
|
|
50
|
-
var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n
|
|
51
|
-
return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
|
|
52
|
-
}, function (props) {
|
|
46
|
+
var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ", "\n"])), function (props) {
|
|
53
47
|
return props.icon ? "4px 8px 4px 0" : "4px 8px";
|
|
54
48
|
}, (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
|
|
55
49
|
|
|
56
|
-
var getBackgroundColor = function getBackgroundColor(variant) {
|
|
57
|
-
switch (variant) {
|
|
58
|
-
case 'positive':
|
|
59
|
-
return _.COLORS.correct_500;
|
|
60
|
-
|
|
61
|
-
case 'warning':
|
|
62
|
-
return _.COLORS.warning_500;
|
|
63
|
-
|
|
64
|
-
case 'critical':
|
|
65
|
-
return _.COLORS.critical_500;
|
|
66
|
-
|
|
67
|
-
case 'accent1':
|
|
68
|
-
return _.COLORS.accent1_500;
|
|
69
|
-
|
|
70
|
-
case 'accent2':
|
|
71
|
-
return _.COLORS.accent2_500;
|
|
72
|
-
|
|
73
|
-
default:
|
|
74
|
-
return _.COLORS.neutral_100;
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
|
|
78
50
|
var Tag = function Tag(_ref) {
|
|
79
51
|
var label = _ref.label,
|
|
80
52
|
icon = _ref.icon,
|
|
81
53
|
_ref$variant = _ref.variant,
|
|
82
54
|
variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
|
|
55
|
+
className = _ref.className,
|
|
83
56
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
57
|
+
var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(variant);
|
|
84
58
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({
|
|
85
59
|
variant: variant,
|
|
86
|
-
isLabelPresent: !!label
|
|
60
|
+
isLabelPresent: !!label,
|
|
61
|
+
className: cls
|
|
87
62
|
}, rest), {}, {
|
|
88
63
|
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
|
|
89
64
|
variant: variant,
|
package/dist/Tag/Tag.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","isLabelPresent","
|
|
1
|
+
{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","ComponentTextStyle","Bold","Tag","label","variant","className","rest","cls"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,6mBAKA,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,EAAlC;AAAA,CALL,EASSC,SAAOC,WAThB,EAUFD,SAAOE,WAVL,EAaSF,SAAOG,WAbhB,EAcFH,SAAOI,WAdL,EAiBSJ,SAAOK,WAjBhB,EAkBFL,SAAOM,WAlBL,EAqBSN,SAAOO,YArBhB,EAsBFP,SAAOQ,YAtBL,EAyBSR,SAAOS,WAzBhB,EA0BFT,SAAOU,WA1BL,EA6BSV,SAAOW,WA7BhB,EA8BFX,SAAOY,WA9BL,CAAf;;AAmCA,IAAMC,aAAa,GAAGjB,0BAAOC,GAAV,iLAAnB;;AASA,IAAMiB,aAAa,GAAGlB,0BAAOC,GAAV,oOAEP,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACiB,IAAN,8BAAH;AAAA,CAFE,EAOf,0BAAmBC,qBAAmBC,IAAtC,EAA4C,IAA5C,CAPe,CAAnB;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAA0D;AAAA,MAAxDC,KAAwD,QAAxDA,KAAwD;AAAA,MAAjDJ,IAAiD,QAAjDA,IAAiD;AAAA,0BAA3CK,OAA2C;AAAA,MAA3CA,OAA2C,6BAAnC,SAAmC;AAAA,MAAxBC,SAAwB,QAAxBA,SAAwB;AAAA,MAAVC,IAAU;AACvG,MAAMC,GAAG,aAAMF,SAAN,aAAMA,SAAN,cAAMA,SAAN,GAAmB,EAAnB,cAAyBD,OAAzB,CAAT;AACA,sBACE,sBAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAA6B,IAAA,cAAc,EAAE,CAAC,CAACD,KAA/C;AAAsD,IAAA,SAAS,EAAEI;AAAjE,KAA0ED,IAA1E;AAAA,eACGP,IAAI,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEK,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJL;AADI,MADX,EAKGI,KAAK,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEC,OAAxB;AAAiC,MAAA,IAAI,EAAEL,IAAvC;AAAA,gBACLI;AADK,MALZ;AAAA,KADF;AAYD,CAdD;;;AALEA,EAAAA,K;AACAJ,EAAAA,I;AACAK,EAAAA,O,4BALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;eAwBzEF,G","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n const cls = `${className ?? ''} ${variant}`;\n return ( \n <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\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;\n"],"file":"Tag.cjs"}
|
package/dist/Tag/Tag.js
CHANGED
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
4
|
import _pt from "prop-types";
|
|
5
|
-
var _excluded = ["label", "icon", "variant"];
|
|
5
|
+
var _excluded = ["label", "icon", "variant", "className"];
|
|
6
6
|
|
|
7
7
|
var _templateObject, _templateObject2, _templateObject3;
|
|
8
8
|
|
|
@@ -15,52 +15,27 @@ import styled from 'styled-components';
|
|
|
15
15
|
import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
|
|
16
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
|
-
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ", ";\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
|
|
18
|
+
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ", ";\n border-radius: 2px;\n\n &.neutral {\n background-color: ", ";\n color: ", ";\n }\n &.positive {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n &.critical {\n background-color: ", ";\n color: ", ";\n }\n &.accent1 {\n background-color: ", ";\n color: ", ";\n }\n &.accent2 {\n background-color: ", ";\n color: ", ";\n }\n\n"])), function (props) {
|
|
19
19
|
return props.isLabelPresent ? '64px' : '';
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
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) {
|
|
24
|
-
return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
|
|
25
|
-
});
|
|
26
|
-
var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ", "\n"])), function (props) {
|
|
27
|
-
return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
|
|
28
|
-
}, function (props) {
|
|
20
|
+
}, COLORS.neutral_100, COLORS.neutral_600, COLORS.correct_100, COLORS.correct_600, COLORS.warning_100, COLORS.warning_600, COLORS.critical_100, COLORS.critical_600, COLORS.accent1_100, COLORS.accent1_600, COLORS.accent2_100, COLORS.accent2_600);
|
|
21
|
+
var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n }\n"])));
|
|
22
|
+
var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ", "\n"])), function (props) {
|
|
29
23
|
return props.icon ? "4px 8px 4px 0" : "4px 8px";
|
|
30
24
|
}, ComponentXSStyling(ComponentTextStyle.Bold, null));
|
|
31
25
|
|
|
32
|
-
var getBackgroundColor = function getBackgroundColor(variant) {
|
|
33
|
-
switch (variant) {
|
|
34
|
-
case 'positive':
|
|
35
|
-
return COLORS.correct_500;
|
|
36
|
-
|
|
37
|
-
case 'warning':
|
|
38
|
-
return COLORS.warning_500;
|
|
39
|
-
|
|
40
|
-
case 'critical':
|
|
41
|
-
return COLORS.critical_500;
|
|
42
|
-
|
|
43
|
-
case 'accent1':
|
|
44
|
-
return COLORS.accent1_500;
|
|
45
|
-
|
|
46
|
-
case 'accent2':
|
|
47
|
-
return COLORS.accent2_500;
|
|
48
|
-
|
|
49
|
-
default:
|
|
50
|
-
return COLORS.neutral_100;
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
|
|
54
26
|
var Tag = function Tag(_ref) {
|
|
55
27
|
var label = _ref.label,
|
|
56
28
|
icon = _ref.icon,
|
|
57
29
|
_ref$variant = _ref.variant,
|
|
58
30
|
variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
|
|
31
|
+
className = _ref.className,
|
|
59
32
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
60
33
|
|
|
34
|
+
var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(variant);
|
|
61
35
|
return /*#__PURE__*/_jsxs(Container, _objectSpread(_objectSpread({
|
|
62
36
|
variant: variant,
|
|
63
|
-
isLabelPresent: !!label
|
|
37
|
+
isLabelPresent: !!label,
|
|
38
|
+
className: cls
|
|
64
39
|
}, rest), {}, {
|
|
65
40
|
children: [icon && /*#__PURE__*/_jsx(IconContainer, {
|
|
66
41
|
variant: variant,
|
package/dist/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","
|
|
1
|
+
{"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","Bold","Tag","label","variant","className","rest","cls"],"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,+lBAKA,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,EAAlC;AAAA,CALL,EASSN,MAAM,CAACO,WAThB,EAUFP,MAAM,CAACQ,WAVL,EAaSR,MAAM,CAACS,WAbhB,EAcFT,MAAM,CAACU,WAdL,EAiBSV,MAAM,CAACW,WAjBhB,EAkBFX,MAAM,CAACY,WAlBL,EAqBSZ,MAAM,CAACa,YArBhB,EAsBFb,MAAM,CAACc,YAtBL,EAyBSd,MAAM,CAACe,WAzBhB,EA0BFf,MAAM,CAACgB,WA1BL,EA6BShB,MAAM,CAACiB,WA7BhB,EA8BFjB,MAAM,CAACkB,WA9BL,CAAf;AAmCA,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAV,mKAAnB;AASA,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAV,sNAEP,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACgB,IAAN,8BAAH;AAAA,CAFE,EAOfnB,kBAAkB,CAACD,kBAAkB,CAACqB,IAApB,EAA0B,IAA1B,CAPH,CAAnB;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAA0D;AAAA,MAAxDC,KAAwD,QAAxDA,KAAwD;AAAA,MAAjDH,IAAiD,QAAjDA,IAAiD;AAAA,0BAA3CI,OAA2C;AAAA,MAA3CA,OAA2C,6BAAnC,SAAmC;AAAA,MAAxBC,SAAwB,QAAxBA,SAAwB;AAAA,MAAVC,IAAU;;AACvG,MAAMC,GAAG,aAAMF,SAAN,aAAMA,SAAN,cAAMA,SAAN,GAAmB,EAAnB,cAAyBD,OAAzB,CAAT;AACA,sBACE,MAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAA6B,IAAA,cAAc,EAAE,CAAC,CAACD,KAA/C;AAAsD,IAAA,SAAS,EAAEI;AAAjE,KAA0ED,IAA1E;AAAA,eACGN,IAAI,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEI,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJJ;AADI,MADX,EAKGG,KAAK,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEC,OAAxB;AAAiC,MAAA,IAAI,EAAEJ,IAAvC;AAAA,gBACLG;AADK,MALZ;AAAA,KADF;AAYD,CAdD;;;AALEA,EAAAA,K;AACAH,EAAAA,I;AACAI,EAAAA,O,aALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;AAwBxF,eAAeF,GAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n const cls = `${className ?? ''} ${variant}`;\n return ( \n <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\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;\n"],"file":"Tag.js"}
|