@proprioo/salatim 18.3.0 → 18.6.1
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/CHANGELOG.md +16 -0
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/ui/src/burger/Burger.d.ts +1 -0
- package/lib/ui/src/burger/Burger.js +2 -2
- package/lib/ui/src/burger/Burger.js.map +1 -1
- package/lib/ui/src/burger/Burger.stories.js +46 -5
- package/lib/ui/src/burger/Burger.stories.js.map +1 -1
- package/lib/ui/src/burger/Burger.styles.d.ts +2 -6
- package/lib/ui/src/burger/Burger.styles.js +9 -4
- package/lib/ui/src/burger/Burger.styles.js.map +1 -1
- package/lib/ui/src/emailInput/EmailInput.styles.js +3 -3
- package/lib/ui/src/emailInput/EmailInput.styles.js.map +1 -1
- package/lib/ui/src/tag/Tag.js +13 -30
- package/lib/ui/src/tag/Tag.js.map +1 -1
- package/lib/ui/src/tag/Tag.stories.js +3 -2
- package/lib/ui/src/tag/Tag.stories.js.map +1 -1
- package/lib/ui/src/tag/Tag.styles.d.ts +5 -1
- package/lib/ui/src/tag/Tag.styles.js +28 -18
- package/lib/ui/src/tag/Tag.styles.js.map +1 -1
- package/lib/ui/src/tag/Tag.test.js +25 -7
- package/lib/ui/src/tag/Tag.test.js.map +1 -1
- package/lib/ui/src/tag/TagColors.d.ts +6 -0
- package/lib/ui/src/tag/TagColors.js +6 -0
- package/lib/ui/src/tag/TagColors.js.map +1 -1
- package/lib/ui/src/tag/interfaces.d.ts +3 -1
- package/lib/ui/src/tag/interfaces.js +1 -0
- package/lib/ui/src/tag/interfaces.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
var react_1 = __importDefault(require("react"));
|
|
7
7
|
var Burger_styles_1 = require("./Burger.styles");
|
|
8
8
|
var Burger = function (_a) {
|
|
9
|
-
var isOpen = _a.isOpen, onClick = _a.onClick, color = _a.color;
|
|
10
|
-
return (react_1.default.createElement(Burger_styles_1.ButtonBurger, { "data-test": "burger", onClick: onClick, isOpen: isOpen, color: color },
|
|
9
|
+
var isOpen = _a.isOpen, _b = _a.isSmall, isSmall = _b === void 0 ? false : _b, onClick = _a.onClick, color = _a.color;
|
|
10
|
+
return (react_1.default.createElement(Burger_styles_1.ButtonBurger, { "data-test": "burger", onClick: onClick, isOpen: isOpen, isSmall: isSmall, color: color },
|
|
11
11
|
react_1.default.createElement(Burger_styles_1.BurgerLine, null),
|
|
12
12
|
react_1.default.createElement(Burger_styles_1.BurgerLine, null),
|
|
13
13
|
react_1.default.createElement(Burger_styles_1.BurgerLine, null)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Burger.js","sourceRoot":"","sources":["../../../../packages/ui/src/burger/Burger.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAkC;AAElC,iDAA2D;
|
|
1
|
+
{"version":3,"file":"Burger.js","sourceRoot":"","sources":["../../../../packages/ui/src/burger/Burger.tsx"],"names":[],"mappings":";;;;;AAAA,gDAAkC;AAElC,iDAA2D;AAS3D,IAAM,MAAM,GAAoB,UAAC,EAKhC;QAJC,MAAM,YAAA,EACN,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,OAAO,aAAA,EACP,KAAK,WAAA;IACD,OAAA,CACJ,8BAAC,4BAAY,iBACD,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QAEZ,8BAAC,0BAAU,OAAG;QACd,8BAAC,0BAAU,OAAG;QACd,8BAAC,0BAAU,OAAG,CACD,CAChB;AAZK,CAYL,CAAC;AAEF,kBAAe,MAAM,CAAC"}
|
|
@@ -1,17 +1,58 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
2
32
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
33
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
34
|
};
|
|
5
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
var react_1 =
|
|
7
|
-
var
|
|
36
|
+
var react_1 = __importStar(require("react"));
|
|
37
|
+
var storybook_state_1 = require("@sambego/storybook-state");
|
|
8
38
|
var addon_knobs_1 = require("@storybook/addon-knobs");
|
|
9
39
|
var react_2 = require("@storybook/react");
|
|
10
40
|
var utils_1 = require("../../../utils");
|
|
11
41
|
var Burger_1 = __importDefault(require("./Burger"));
|
|
42
|
+
var knobs = function () { return ({
|
|
43
|
+
isSmall: addon_knobs_1.boolean('isSmall', false)
|
|
44
|
+
}); };
|
|
45
|
+
var burgerState = new storybook_state_1.Store({
|
|
46
|
+
isOpen: false
|
|
47
|
+
});
|
|
48
|
+
burgerState.subscribe(function () {
|
|
49
|
+
react_2.forceReRender();
|
|
50
|
+
});
|
|
12
51
|
react_2.storiesOf('Burger', module).add('Burger', function () {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
52
|
+
return (react_1.default.createElement(react_1.Fragment, null,
|
|
53
|
+
react_1.default.createElement(storybook_state_1.State, { store: burgerState },
|
|
54
|
+
react_1.default.createElement(Burger_1.default, __assign({ isOpen: burgerState.get('isOpen'), onClick: function () {
|
|
55
|
+
return burgerState.set({ isOpen: !burgerState.get('isOpen') });
|
|
56
|
+
}, color: utils_1.colors.dark.base }, knobs())))));
|
|
16
57
|
});
|
|
17
58
|
//# sourceMappingURL=Burger.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Burger.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/burger/Burger.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Burger.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/burger/Burger.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwC;AAExC,4DAAwD;AACxD,sDAAiD;AACjD,0CAA4D;AAE5D,wCAAwC;AACxC,oDAA8B;AAM9B,IAAM,KAAK,GAAG,cAAM,OAAA,CAAC;IACnB,OAAO,EAAE,qBAAO,CAAC,SAAS,EAAE,KAAK,CAAC;CACnC,CAAC,EAFkB,CAElB,CAAC;AAEH,IAAM,WAAW,GAAG,IAAI,uBAAK,CAAS;IACpC,MAAM,EAAE,KAAK;CACd,CAAC,CAAC;AAEH,WAAW,CAAC,SAAS,CAAC;IACpB,qBAAa,EAAE,CAAC;AAClB,CAAC,CAAC,CAAC;AAEH,iBAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE;IACxC,OAAO,CACL,8BAAC,gBAAQ;QACP,8BAAC,uBAAK,IAAC,KAAK,EAAE,WAAW;YACvB,8BAAC,gBAAM,aACL,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EACjC,OAAO,EAAE;oBACP,OAAA,WAAW,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAAvD,CAAuD,EAEzD,KAAK,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI,IACnB,KAAK,EAAE,EACX,CACI,CACC,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
isOpen: boolean;
|
|
3
|
-
color: string;
|
|
4
|
-
}
|
|
1
|
+
import { BurgerProps } from './Burger';
|
|
5
2
|
export declare const BurgerLine: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
6
|
-
export declare const ButtonBurger: import("styled-components").StyledComponent<"button", any,
|
|
7
|
-
export {};
|
|
3
|
+
export declare const ButtonBurger: import("styled-components").StyledComponent<"button", any, Pick<BurgerProps, "color" | "isOpen" | "isSmall">, never>;
|
|
@@ -27,15 +27,20 @@ exports.ButtonBurger = exports.BurgerLine = void 0;
|
|
|
27
27
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
28
28
|
var spacing_1 = require("../../../utils/src/spacing");
|
|
29
29
|
var burgerMove = spacing_1.convertPxToRem(15);
|
|
30
|
-
exports.BurgerLine = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
31
|
-
exports.ButtonBurger = styled_components_1.default.button(
|
|
32
|
-
"\n\n
|
|
30
|
+
exports.BurgerLine = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n height: ", ";\n width: ", ";\n opacity: 1;\n border-radius: ", ";\n transition: all 0.5s;\n transform-origin: center;\n\n & + & {\n margin-top: ", ";\n }\n"], ["\n display: block;\n height: ", ";\n width: ", ";\n opacity: 1;\n border-radius: ", ";\n transition: all 0.5s;\n transform-origin: center;\n\n & + & {\n margin-top: ", ";\n }\n"])), spacing_1.convertPxToRem(2), spacing_1.convertPxToRem(22), spacing_1.convertPxToRem(1), spacing_1.convertPxToRem(4));
|
|
31
|
+
exports.ButtonBurger = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: unset;\n background-color: transparent;\n height: ", ";\n width: ", ";\n position: relative;\n cursor: pointer;\n\n &:focus,\n &:active {\n outline: unset;\n }\n\n ", "\n\n ", "\n\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: unset;\n background-color: transparent;\n height: ", ";\n width: ", ";\n position: relative;\n cursor: pointer;\n\n &:focus,\n &:active {\n outline: unset;\n }\n\n ",
|
|
32
|
+
"\n\n ",
|
|
33
|
+
"\n\n ",
|
|
33
34
|
"\n"])), spacing_1.convertPxToRem(32), spacing_1.convertPxToRem(32), function (_a) {
|
|
34
35
|
var color = _a.color;
|
|
35
36
|
return styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", " {\n background-color: ", ";\n }\n "], ["\n ", " {\n background-color: ", ";\n }\n "])), exports.BurgerLine, color);
|
|
36
37
|
}, function (_a) {
|
|
37
38
|
var isOpen = _a.isOpen;
|
|
38
39
|
return isOpen && styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", " {\n position: absolute;\n\n &:first-child {\n transform: rotate(45deg);\n top: ", ";\n }\n\n &:last-child {\n transform: rotate(-45deg);\n bottom: ", ";\n }\n\n &:nth-child(2n) {\n opacity: 0;\n }\n }\n "], ["\n ", " {\n position: absolute;\n\n &:first-child {\n transform: rotate(45deg);\n top: ", ";\n }\n\n &:last-child {\n transform: rotate(-45deg);\n bottom: ", ";\n }\n\n &:nth-child(2n) {\n opacity: 0;\n }\n }\n "])), exports.BurgerLine, burgerMove, burgerMove);
|
|
40
|
+
}, function (_a) {
|
|
41
|
+
var isSmall = _a.isSmall, isOpen = _a.isOpen;
|
|
42
|
+
return isSmall && styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n\n ", " {\n width: ", ";\n }\n\n ", " + ", " {\n margin-top: ", ";\n }\n\n ", "\n "], ["\n height: ", ";\n width: ", ";\n\n ", " {\n width: ", ";\n }\n\n ", " + ", " {\n margin-top: ", ";\n }\n\n ",
|
|
43
|
+
"\n "])), spacing_1.convertPxToRem(24), spacing_1.convertPxToRem(24), exports.BurgerLine, spacing_1.convertPxToRem(12), exports.BurgerLine, exports.BurgerLine, spacing_1.convertPxToRem(2), isOpen && styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", " {\n &:first-child {\n top: ", ";\n }\n\n &:last-child {\n bottom: ", ";\n }\n }\n "], ["\n ", " {\n &:first-child {\n top: ", ";\n }\n\n &:last-child {\n bottom: ", ";\n }\n }\n "])), exports.BurgerLine, spacing_1.convertPxToRem(11), spacing_1.convertPxToRem(11)));
|
|
39
44
|
});
|
|
40
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
45
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
41
46
|
//# sourceMappingURL=Burger.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Burger.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/burger/Burger.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAEhD,sDAA4D;
|
|
1
|
+
{"version":3,"file":"Burger.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/burger/Burger.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAEhD,sDAA4D;AAG5D,IAAM,UAAU,GAAG,wBAAc,CAAC,EAAE,CAAC,CAAC;AAEzB,QAAA,UAAU,GAAG,2BAAM,CAAC,IAAI,iQAAA,iCAEzB,EAAiB,cAClB,EAAkB,qCAEV,EAAiB,wFAKlB,EAAiB,UAElC,KAVW,wBAAc,CAAC,CAAC,CAAC,EAClB,wBAAc,CAAC,EAAE,CAAC,EAEV,wBAAc,CAAC,CAAC,CAAC,EAKlB,wBAAc,CAAC,CAAC,CAAC,EAEjC;AAEW,QAAA,YAAY,GAAG,2BAAM,CAAC,MAAM,2YAExC,kLAQW,EAAkB,cACnB,EAAkB,0GASzB;IAID,QAEC;IAoBC,QAED;IA0BC,IACJ,KAjEW,wBAAc,CAAC,EAAE,CAAC,EACnB,wBAAc,CAAC,EAAE,CAAC,EASzB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,uBAAG,2HAAA,QAChB,EAAU,8BACU,EAAK,cAE5B,KAHG,kBAAU,EACU,KAAK;AAFZ,CAIhB,EAEC,UAAC,EAAU;QAAR,MAAM,YAAA;IACT,OAAA,MAAM,IACN,uBAAG,mYAAA,UACC,EAAU,kHAKD,EAAU,kGAKP,EAAU,4FAOzB,KAjBG,kBAAU,EAKD,UAAU,EAKP,UAAU,CAOzB;AAnBD,CAmBC,EAED,UAAC,EAAmB;QAAjB,OAAO,aAAA,EAAE,MAAM,YAAA;IAClB,OAAA,OAAO,IACP,uBAAG,4OAAA,kBACS,EAAkB,kBACnB,EAAkB,aAEzB,EAAU,qBACD,EAAkB,sBAG3B,EAAU,KAAM,EAAU,0BACZ,EAAiB,sBAG/B;QAWD,QACF,KAvBW,wBAAc,CAAC,EAAE,CAAC,EACnB,wBAAc,CAAC,EAAE,CAAC,EAEzB,kBAAU,EACD,wBAAc,CAAC,EAAE,CAAC,EAG3B,kBAAU,EAAM,kBAAU,EACZ,wBAAc,CAAC,CAAC,CAAC,EAG/B,MAAM,IACR,uBAAG,4OAAA,YACC,EAAU,kDAED,EAAkB,kEAIf,EAAkB,mCAGjC,KATG,kBAAU,EAED,wBAAc,CAAC,EAAE,CAAC,EAIf,wBAAc,CAAC,EAAE,CAAC,CAGjC,CACF;AAzBD,CAyBC,EACH"}
|
|
@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.Button = exports.SuggestionLayout = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
var
|
|
13
|
-
exports.SuggestionLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n color: ", ";\n padding: 0 ", ";\n margin-top: ", ";\n"], ["\n ", "\n color: ", ";\n padding: 0 ", ";\n margin-top: ", ";\n"])),
|
|
14
|
-
exports.Button = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: none;\n margin: 0;\n padding: 0;\n width: auto;\n overflow: visible;\n\n background: transparent;\n\n /* inherit font & color from ancestor */\n color: ", ";\n font: inherit;\n font-weight: bold;\n text-decoration: underline;\n cursor: pointer;\n\n line-height: normal;\n\n /* Corrects font smoothing for webkit */\n -webkit-font-smoothing: inherit;\n -moz-osx-font-smoothing: inherit;\n\n -webkit-appearance: none;\n"], ["\n border: none;\n margin: 0;\n padding: 0;\n width: auto;\n overflow: visible;\n\n background: transparent;\n\n /* inherit font & color from ancestor */\n color: ", ";\n font: inherit;\n font-weight: bold;\n text-decoration: underline;\n cursor: pointer;\n\n line-height: normal;\n\n /* Corrects font smoothing for webkit */\n -webkit-font-smoothing: inherit;\n -moz-osx-font-smoothing: inherit;\n\n -webkit-appearance: none;\n"])),
|
|
12
|
+
var utils_1 = require("../../../utils");
|
|
13
|
+
exports.SuggestionLayout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n color: ", ";\n padding: 0 ", ";\n margin-top: ", ";\n"], ["\n ", "\n color: ", ";\n padding: 0 ", ";\n margin-top: ", ";\n"])), utils_1.paragraphs.body2, utils_1.colors.green.base, utils_1.convertPxToRem(16), utils_1.convertPxToRem(8));
|
|
14
|
+
exports.Button = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: none;\n margin: 0;\n padding: 0;\n width: auto;\n overflow: visible;\n\n background: transparent;\n\n /* inherit font & color from ancestor */\n color: ", ";\n font: inherit;\n font-weight: bold;\n text-decoration: underline;\n cursor: pointer;\n\n line-height: normal;\n\n /* Corrects font smoothing for webkit */\n -webkit-font-smoothing: inherit;\n -moz-osx-font-smoothing: inherit;\n\n -webkit-appearance: none;\n"], ["\n border: none;\n margin: 0;\n padding: 0;\n width: auto;\n overflow: visible;\n\n background: transparent;\n\n /* inherit font & color from ancestor */\n color: ", ";\n font: inherit;\n font-weight: bold;\n text-decoration: underline;\n cursor: pointer;\n\n line-height: normal;\n\n /* Corrects font smoothing for webkit */\n -webkit-font-smoothing: inherit;\n -moz-osx-font-smoothing: inherit;\n\n -webkit-appearance: none;\n"])), utils_1.colors.green.base);
|
|
15
15
|
var templateObject_1, templateObject_2;
|
|
16
16
|
//# sourceMappingURL=EmailInput.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailInput.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/emailInput/EmailInput.styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAuC;AAEvC,
|
|
1
|
+
{"version":3,"file":"EmailInput.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/emailInput/EmailInput.styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAuC;AAEvC,wCAAoE;AAEvD,QAAA,gBAAgB,GAAG,2BAAM,CAAC,GAAG,wIAAA,MACtC,EAAgB,aACT,EAAiB,kBACb,EAAkB,mBACjB,EAAiB,KAChC,KAJG,kBAAU,CAAC,KAAK,EACT,cAAM,CAAC,KAAK,CAAC,IAAI,EACb,sBAAc,CAAC,EAAE,CAAC,EACjB,sBAAc,CAAC,CAAC,CAAC,EAC/B;AAEW,QAAA,MAAM,GAAG,2BAAM,CAAC,MAAM,kgBAAA,6KAUxB,EAAiB,gRAa3B,KAbU,cAAM,CAAC,KAAK,CAAC,IAAI,EAa1B"}
|
package/lib/ui/src/tag/Tag.js
CHANGED
|
@@ -1,43 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
-
}) : function(o, v) {
|
|
12
|
-
o["default"] = v;
|
|
13
|
-
});
|
|
14
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
-
if (mod && mod.__esModule) return mod;
|
|
16
|
-
var result = {};
|
|
17
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
-
__setModuleDefault(result, mod);
|
|
19
|
-
return result;
|
|
20
|
-
};
|
|
21
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
4
|
};
|
|
24
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
var react_1 =
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
26
7
|
var CloseBox_1 = __importDefault(require("../icons/CloseBox"));
|
|
27
8
|
var interfaces_1 = require("./interfaces");
|
|
28
9
|
var Tag_styles_1 = require("./Tag.styles");
|
|
29
10
|
var Tag = function (_a) {
|
|
30
|
-
var labels = _a.labels, appearance = _a.appearance, color = _a.color, icon = _a.icon, isOutlined = _a.isOutlined, dataTest = _a.dataTest, onClose = _a.onClose;
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
11
|
+
var labels = _a.labels, appearance = _a.appearance, color = _a.color, icon = _a.icon, isOutlined = _a.isOutlined, dataTest = _a.dataTest, _b = _a.numberOfTags, numberOfTags = _b === void 0 ? labels.length : _b, onClose = _a.onClose;
|
|
12
|
+
var tagsToDisplay = labels.slice(0, numberOfTags);
|
|
13
|
+
var tagsToHide = labels.slice(numberOfTags);
|
|
14
|
+
return (react_1.default.createElement(Tag_styles_1.TagLayout, { hasMultipleTags: labels.length > 1 },
|
|
15
|
+
tagsToDisplay.map(function (tag, index) { return (react_1.default.createElement(Tag_styles_1.BasicTag, { appearance: appearance, color: color, isOutlined: isOutlined, icon: !!icon, close: !!onClose, "data-test": dataTest, key: index },
|
|
34
16
|
icon && (react_1.default.createElement(Tag_styles_1.IconWrapper, { color: color, "data-test": "tag-icon" }, icon)),
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
17
|
+
tag,
|
|
18
|
+
onClose && (react_1.default.createElement(Tag_styles_1.TagCloser, { onClick: onClose, "data-test": "tag-closer" },
|
|
19
|
+
react_1.default.createElement(CloseBox_1.default, null))))); }),
|
|
20
|
+
Boolean(tagsToHide.length) && (react_1.default.createElement(Tag_styles_1.TagList, { "data-test": "list-tag" },
|
|
21
|
+
react_1.default.createElement(Tag_styles_1.BasicTag, { appearance: appearance, color: color, isOutlined: isOutlined, icon: !!icon, "data-test": dataTest },
|
|
22
|
+
icon && (react_1.default.createElement(Tag_styles_1.IconWrapper, { color: color, "data-test": "tag-icon" }, icon)), "+ " + tagsToHide.length),
|
|
23
|
+
react_1.default.createElement(Tag_styles_1.List, { color: color, appearance: appearance }, tagsToHide.map(function (label, index) { return (react_1.default.createElement(Tag_styles_1.TagElement, { key: index, "data-test": "tag-element" }, label)); }))))));
|
|
41
24
|
};
|
|
42
25
|
Tag.defaultProps = {
|
|
43
26
|
appearance: interfaces_1.TagAppearance.CUSTOMER,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA4C;AAE5C,+DAAyC;AACzC,2CAAuE;AACvE,2CAQsB;AAEtB,IAAM,GAAG,GAAiB,UAAC,EAS1B;QARC,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,oBAA4B,EAA5B,YAAY,mBAAG,MAAM,CAAC,MAAM,KAAA,EAC5B,OAAO,aAAA;IAEP,IAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IACpD,IAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,sBAAS,IAAC,eAAe,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC;QAC1C,aAAa,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK,IAAK,OAAA,CACjC,8BAAC,qBAAQ,IACP,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,CAAC,CAAC,IAAI,EACZ,KAAK,EAAE,CAAC,CAAC,OAAO,eACL,QAAQ,EACnB,GAAG,EAAE,KAAK;YAET,IAAI,IAAI,CACP,8BAAC,wBAAW,IAAC,KAAK,EAAE,KAAK,eAAY,UAAU,IAC5C,IAAI,CACO,CACf;YACA,GAAG;YACH,OAAO,IAAI,CACV,8BAAC,sBAAS,IAAC,OAAO,EAAE,OAAO,eAAY,YAAY;gBACjD,8BAAC,kBAAQ,OAAG,CACF,CACb,CACQ,CACZ,EAtBkC,CAsBlC,CAAC;QACD,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAC7B,8BAAC,oBAAO,iBAAW,UAAU;YAC3B,8BAAC,qBAAQ,IACP,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,CAAC,CAAC,IAAI,eACD,QAAQ;gBAElB,IAAI,IAAI,CACP,8BAAC,wBAAW,IAAC,KAAK,EAAE,KAAK,eAAY,UAAU,IAC5C,IAAI,CACO,CACf,EACA,OAAK,UAAU,CAAC,MAAQ,CAChB;YACX,8BAAC,iBAAI,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,IACvC,UAAU,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,CAChC,8BAAC,uBAAU,IAAC,GAAG,EAAE,KAAK,eAAY,aAAa,IAC5C,KAAK,CACK,CACd,EAJiC,CAIjC,CAAC,CACG,CACC,CACX,CACS,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,GAAG,CAAC,YAAY,GAAG;IACjB,UAAU,EAAE,0BAAa,CAAC,QAAQ;IAClC,KAAK,EAAE,2BAAc,CAAC,MAAM;IAC5B,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,kBAAe,GAAG,CAAC"}
|
|
@@ -47,9 +47,10 @@ var knobs = function () { return ({
|
|
|
47
47
|
color: addon_knobs_1.select('Color', interfaces_1.TagColorsTypes, interfaces_1.TagColorsTypes.ORANGE),
|
|
48
48
|
labels: addon_knobs_1.select('Label', {
|
|
49
49
|
Simple: ['Pain au chocolat'],
|
|
50
|
-
Multiple: ['
|
|
50
|
+
Multiple: ['Pain au chocolat', 'Chocolatine', 'Croustilune', 'Ensamaida']
|
|
51
51
|
}, ['Pain au chocolat']),
|
|
52
|
-
isOutlined: addon_knobs_1.boolean('Outlined', false)
|
|
52
|
+
isOutlined: addon_knobs_1.boolean('Outlined', false),
|
|
53
|
+
numberOfTags: addon_knobs_1.number('Number of tags to display', 4)
|
|
53
54
|
}); };
|
|
54
55
|
react_2.storiesOf('Tag', module)
|
|
55
56
|
.add('Basic', function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwC;AAExC,0DAAkD;AAClD,
|
|
1
|
+
{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,10 +4,14 @@ interface TagBaseProps {
|
|
|
4
4
|
icon?: boolean;
|
|
5
5
|
}
|
|
6
6
|
export declare const TagBase: import("styled-components").FlattenSimpleInterpolation;
|
|
7
|
+
export declare const TAG_BUSINESS_BASE: import("styled-components").FlattenSimpleInterpolation;
|
|
7
8
|
export declare const BasicTag: import("styled-components").StyledComponent<"span", any, Pick<TagProps, "appearance" | "color" | "isOutlined"> & TagBaseProps, never>;
|
|
8
9
|
export declare const TagCloser: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
+
export declare const TagLayout: import("styled-components").StyledComponent<"div", any, {
|
|
11
|
+
hasMultipleTags: boolean;
|
|
12
|
+
}, never>;
|
|
9
13
|
export declare const TagElement: import("styled-components").StyledComponent<"li", any, {}, never>;
|
|
10
|
-
export declare const List: import("styled-components").StyledComponent<"ul", any, Pick<TagProps, "color">, never>;
|
|
14
|
+
export declare const List: import("styled-components").StyledComponent<"ul", any, Pick<TagProps, "appearance" | "color">, never>;
|
|
11
15
|
export declare const TagList: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
16
|
export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
13
17
|
export {};
|
|
@@ -23,38 +23,48 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.IconWrapper = exports.TagList = exports.List = exports.TagElement = exports.TagCloser = exports.BasicTag = exports.TagBase = void 0;
|
|
26
|
+
exports.IconWrapper = exports.TagList = exports.List = exports.TagElement = exports.TagLayout = exports.TagCloser = exports.BasicTag = exports.TAG_BUSINESS_BASE = exports.TagBase = void 0;
|
|
27
27
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
28
28
|
var utils_1 = require("../../../utils");
|
|
29
29
|
var interfaces_1 = require("./interfaces");
|
|
30
30
|
var TagColors_1 = require("./TagColors");
|
|
31
31
|
exports.TagBase = styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-size: ", ";\n line-height: ", ";\n min-width: ", ";\n padding: ", " ", ";\n"], ["\n ", ";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-size: ", ";\n line-height: ", ";\n min-width: ", ";\n padding: ", " ", ";\n"])), utils_1.ArchivoFont, utils_1.radius.biggest, utils_1.fonts.small, utils_1.convertPxToRem(16), utils_1.convertPxToRem(24), utils_1.convertPxToRem(4), utils_1.convertPxToRem(16));
|
|
32
|
-
exports.
|
|
32
|
+
exports.TAG_BUSINESS_BASE = styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: ", ";\n border-radius: ", ";\n padding: ", ";\n text-transform: uppercase;\n font-weight: bold;\n"], ["\n font-size: ", ";\n border-radius: ", ";\n padding: ", ";\n text-transform: uppercase;\n font-weight: bold;\n"])), utils_1.fonts.smallest, utils_1.convertPxToRem(3), utils_1.convertPxToRem(4));
|
|
33
|
+
exports.BasicTag = styled_components_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ";\n\n ", "}\n\n \n\n ", "\n \n ", "\n"], ["\n ", ";\n\n ",
|
|
33
34
|
"}\n\n \n\n ",
|
|
34
35
|
"\n \n ",
|
|
35
|
-
"\n
|
|
36
|
+
"\n"])), exports.TagBase, function (_a) {
|
|
36
37
|
var appearance = _a.appearance, color = _a.color, isOutlined = _a.isOutlined;
|
|
37
38
|
return appearance === interfaces_1.TagAppearance.BUSINESS
|
|
38
|
-
? styled_components_1.css(
|
|
39
|
-
"}\n "])),
|
|
39
|
+
? styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n \n ", "}\n "], ["\n ", ";\n \n ",
|
|
40
|
+
"}\n "])), exports.TAG_BUSINESS_BASE, color &&
|
|
40
41
|
(isOutlined
|
|
41
|
-
? styled_components_1.css(
|
|
42
|
+
? styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n border: 1px solid ", ";\n background: white;\n "], ["\n color: ", ";\n border: 1px solid ", ";\n background: white;\n "])), TagColors_1.TagColors[color].colorOutlined, TagColors_1.TagColors[color].backgroundOutlined) : styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), TagColors_1.TagColors[color].color, TagColors_1.TagColors[color].background))) : color &&
|
|
42
43
|
(isOutlined
|
|
43
|
-
? styled_components_1.css(
|
|
44
|
+
? styled_components_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), TagColors_1.TagColors[color].colorOutlined, TagColors_1.TagColors[color].backgroundOutlined) : styled_components_1.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), TagColors_1.TagColors[color].color, TagColors_1.TagColors[color].background));
|
|
44
45
|
}, function (_a) {
|
|
45
46
|
var icon = _a.icon;
|
|
46
|
-
return icon && styled_components_1.css(
|
|
47
|
+
return icon && styled_components_1.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-left: ", ";\n "], ["\n padding-left: ", ";\n "])), utils_1.convertPxToRem(8));
|
|
47
48
|
}, function (_a) {
|
|
48
49
|
var close = _a.close;
|
|
49
|
-
return close && styled_components_1.css(
|
|
50
|
-
}, utils_1.convertPxToRem(4));
|
|
51
|
-
exports.TagCloser = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n margin-left: ", ";\n cursor: pointer;\n\n &:hover {\n opacity: 0.9;\n }\n\n &:active {\n opacity: 0.6;\n }\n\n &:active,\n &:focus {\n outline: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n margin-left: ", ";\n cursor: pointer;\n\n &:hover {\n opacity: 0.9;\n }\n\n &:active {\n opacity: 0.6;\n }\n\n &:active,\n &:focus {\n outline: unset;\n }\n"])), utils_1.convertPxToRem(16), utils_1.convertPxToRem(16), utils_1.convertPxToRem(8));
|
|
52
|
-
exports.TagElement = styled_components_1.default.li(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n white-space: nowrap;\n font-size: ", ";\n line-height: ", ";\n"], ["\n white-space: nowrap;\n font-size: ", ";\n line-height: ", ";\n"])), utils_1.fonts.small, utils_1.convertPxToRem(16));
|
|
53
|
-
exports.List = styled_components_1.default.ul(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n position: absolute;\n display: none;\n box-shadow: ", ";\n border-radius: ", ";\n list-style-type: none;\n padding: ", " ", ";\n bottom: 0;\n left: ", ";\n margin: 0;\n\n ", ";\n"], ["\n position: absolute;\n display: none;\n box-shadow: ", ";\n border-radius: ", ";\n list-style-type: none;\n padding: ", " ", ";\n bottom: 0;\n left: ", ";\n margin: 0;\n\n ",
|
|
54
|
-
";\n"])), utils_1.shadows.level2, utils_1.radius.normal, utils_1.convertPxToRem(8), utils_1.convertPxToRem(12), utils_1.convertPxToRem(4), function (props) {
|
|
55
|
-
return props.color && styled_components_1.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), TagColors_1.TagColors[props.color].color, TagColors_1.TagColors[props.color].background);
|
|
50
|
+
return close && styled_components_1.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-right: ", ";\n "], ["\n padding-right: ", ";\n "])), utils_1.convertPxToRem(8));
|
|
56
51
|
});
|
|
57
|
-
exports.
|
|
58
|
-
exports.
|
|
59
|
-
|
|
52
|
+
exports.TagCloser = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n margin-left: ", ";\n cursor: pointer;\n\n &:hover {\n opacity: 0.9;\n }\n\n &:active {\n opacity: 0.6;\n }\n\n &:active,\n &:focus {\n outline: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n margin-left: ", ";\n cursor: pointer;\n\n &:hover {\n opacity: 0.9;\n }\n\n &:active {\n opacity: 0.6;\n }\n\n &:active,\n &:focus {\n outline: unset;\n }\n"])), utils_1.convertPxToRem(16), utils_1.convertPxToRem(16), utils_1.convertPxToRem(8));
|
|
53
|
+
exports.TagLayout = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ",
|
|
54
|
+
"\n"])), function (_a) {
|
|
55
|
+
var hasMultipleTags = _a.hasMultipleTags;
|
|
56
|
+
return hasMultipleTags && styled_components_1.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n\n ", " {\n margin: 0 ", " ", " 0;\n }\n "], ["\n display: flex;\n flex-wrap: wrap;\n\n ", " {\n margin: 0 ", " ", " 0;\n }\n "])), exports.BasicTag, utils_1.convertPxToRem(4), utils_1.convertPxToRem(4));
|
|
57
|
+
});
|
|
58
|
+
exports.TagElement = styled_components_1.default.li(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n white-space: nowrap;\n line-height: ", ";\n"], ["\n white-space: nowrap;\n line-height: ", ";\n"])), utils_1.convertPxToRem(16));
|
|
59
|
+
exports.List = styled_components_1.default.ul(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: none;\n position: absolute;\n bottom: ", ";\n left: 0;\n margin: 0;\n padding: ", " ", ";\n border-radius: ", ";\n box-shadow: ", ";\n font-size: ", ";\n list-style-type: none;\n\n ", ";\n\n ", ";\n"], ["\n display: none;\n position: absolute;\n bottom: ", ";\n left: 0;\n margin: 0;\n padding: ", " ", ";\n border-radius: ", ";\n box-shadow: ", ";\n font-size: ", ";\n list-style-type: none;\n\n ",
|
|
60
|
+
";\n\n ",
|
|
61
|
+
";\n"])), utils_1.convertPxToRem(4), utils_1.convertPxToRem(8), utils_1.convertPxToRem(12), utils_1.radius.normal, utils_1.shadows.level2, utils_1.fonts.small, function (_a) {
|
|
62
|
+
var appearance = _a.appearance;
|
|
63
|
+
return appearance === interfaces_1.TagAppearance.BUSINESS && exports.TAG_BUSINESS_BASE;
|
|
64
|
+
}, function (props) {
|
|
65
|
+
return props.color && styled_components_1.css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), TagColors_1.TagColors[props.color].color, TagColors_1.TagColors[props.color].background);
|
|
66
|
+
});
|
|
67
|
+
exports.TagList = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n\n &:hover ", " {\n display: block;\n }\n"], ["\n position: relative;\n display: inline-block;\n\n &:hover ", " {\n display: block;\n }\n"])), exports.List);
|
|
68
|
+
exports.IconWrapper = styled_components_1.default.span(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n margin-right: ", ";\n\n svg {\n width: 100%;\n height: 100%;\n }\n\n path {\n fill: currentColor;\n }\n"], ["\n width: ", ";\n height: ", ";\n margin-right: ", ";\n\n svg {\n width: 100%;\n height: 100%;\n }\n\n path {\n fill: currentColor;\n }\n"])), utils_1.convertPxToRem(16), utils_1.convertPxToRem(16), utils_1.convertPxToRem(8));
|
|
69
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
|
|
60
70
|
//# sourceMappingURL=Tag.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAEhD,wCAMwB;AACxB,2CAAuD;AACvD,yCAAwC;AAO3B,QAAA,OAAO,GAAG,uBAAG,0QAAA,MACtB,EAAW,mGAII,EAAc,kBAClB,EAAW,oBACT,EAAkB,kBACpB,EAAkB,gBACpB,EAAiB,GAAI,EAAkB,KACnD,KATG,mBAAW,EAII,cAAM,CAAC,OAAO,EAClB,aAAK,CAAC,KAAK,EACT,sBAAc,CAAC,EAAE,CAAC,EACpB,sBAAc,CAAC,EAAE,CAAC,EACpB,sBAAc,CAAC,CAAC,CAAC,EAAI,sBAAc,CAAC,EAAE,CAAC,EAClD;AAEW,QAAA,QAAQ,GAAG,2BAAM,CAAC,IAAI,
|
|
1
|
+
{"version":3,"file":"Tag.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -100,15 +100,33 @@ describe('Tag component', function () {
|
|
|
100
100
|
react_2.render(react_1.default.createElement(Tag_1.default, __assign({}, defaultProps)));
|
|
101
101
|
expect(react_2.screen.getByTestId('basic-tag')).toBeInTheDocument();
|
|
102
102
|
});
|
|
103
|
-
it('should render component with
|
|
104
|
-
react_2.render(react_1.default.createElement(Tag_1.default, __assign({}, defaultProps, { labels: ['tag 1', 'tag 2', 'tag 3'] })));
|
|
105
|
-
expect(react_2.screen.getByTestId('list-tag')).toBeInTheDocument();
|
|
106
|
-
expect(react_2.screen.getByTestId('basic-tag')).toBeInTheDocument();
|
|
107
|
-
expect(react_2.screen.getAllByTestId('tag-element')).toHaveLength(2);
|
|
108
|
-
});
|
|
109
|
-
it('should render component with others', function () {
|
|
103
|
+
it('should render component with icon', function () {
|
|
110
104
|
react_2.render(react_1.default.createElement(Tag_1.default, __assign({}, defaultProps, { icon: react_1.default.createElement(react_1.Fragment, null) })));
|
|
111
105
|
expect(react_2.screen.getByTestId('tag-icon')).toBeInTheDocument();
|
|
112
106
|
});
|
|
107
|
+
describe('List of tags', function () {
|
|
108
|
+
it('should render all tags - default behavior', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
109
|
+
return __generator(this, function (_a) {
|
|
110
|
+
react_2.render(react_1.default.createElement(Tag_1.default, __assign({}, defaultProps, { labels: ['tag 1', 'tag 2', 'tag 3'] })));
|
|
111
|
+
expect(react_2.screen.queryByTestId('list-tag')).not.toBeInTheDocument();
|
|
112
|
+
expect(react_2.screen.queryAllByTestId('tag-element')).toHaveLength(0);
|
|
113
|
+
expect(react_2.screen.queryAllByTestId('basic-tag')).toHaveLength(3);
|
|
114
|
+
return [2 /*return*/];
|
|
115
|
+
});
|
|
116
|
+
}); });
|
|
117
|
+
it('should render some tags', function () {
|
|
118
|
+
react_2.render(react_1.default.createElement(Tag_1.default, __assign({}, defaultProps, { labels: ['tag 1', 'tag 2', 'tag 3'], numberOfTags: 2 })));
|
|
119
|
+
expect(react_2.screen.queryAllByTestId('basic-tag')).toHaveLength(3);
|
|
120
|
+
expect(react_2.screen.getByTestId('list-tag')).toBeInTheDocument();
|
|
121
|
+
expect(react_2.screen.getByText('+ 1')).toBeInTheDocument();
|
|
122
|
+
expect(react_2.screen.queryAllByTestId('tag-element')).toHaveLength(1);
|
|
123
|
+
});
|
|
124
|
+
it('should not render anything', function () {
|
|
125
|
+
react_2.render(react_1.default.createElement(Tag_1.default, __assign({}, defaultProps, { labels: [], numberOfTags: 2 })));
|
|
126
|
+
expect(react_2.screen.queryByTestId('basic-tag')).not.toBeInTheDocument();
|
|
127
|
+
expect(react_2.screen.queryByTestId('list-tag')).not.toBeInTheDocument();
|
|
128
|
+
expect(react_2.screen.queryByTestId('tag-element')).not.toBeInTheDocument();
|
|
129
|
+
});
|
|
130
|
+
});
|
|
113
131
|
});
|
|
114
132
|
//# sourceMappingURL=Tag.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwC;AAExC,gDAAiE;AACjE,2EAAoD;AAEpD,2CAAwD;AACxD,8CAAwB;AAExB,IAAM,YAAY,GAAa;IAC7B,MAAM,EAAE,CAAC,KAAK,CAAC;IACf,KAAK,EAAE,2BAAc,CAAC,MAAM;CAC7B,CAAC;AAEF,IAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAE9B,QAAQ,CAAC,eAAe,EAAE;IACxB,SAAS,CAAC,cAAM,OAAA,IAAI,CAAC,aAAa,EAAE,EAApB,CAAoB,CAAC,CAAC;IACtC,QAAQ,CAAC,cAAM,OAAA,IAAI,CAAC,aAAa,EAAE,EAApB,CAAoB,CAAC,CAAC;IAErC,EAAE,CAAC,8BAA8B,EAAE;;;;oBACjC,cAAM,CAAC,8BAAC,aAAG,eAAK,YAAY,IAAE,OAAO,EAAE,WAAW,IAAI,CAAC,CAAC;oBAExD,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;oBAC7D,oBAAS,CAAC,KAAK,CAAC,cAAM,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC;oBAClD,qBAAM,eAAO,CAAC,cAAM,OAAA,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,EAAtC,CAAsC,CAAC,EAAA;;oBAA3D,SAA2D,CAAC;;;;SAC7D,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE;QAC5B,cAAM,CAAC,8BAAC,aAAG,eAAK,YAAY,EAAI,CAAC,CAAC;QAElC,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"Tag.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,6 +11,12 @@ export declare const TagColors: {
|
|
|
11
11
|
colorOutlined: string;
|
|
12
12
|
backgroundOutlined: string;
|
|
13
13
|
};
|
|
14
|
+
DARK_GREY: {
|
|
15
|
+
color: string;
|
|
16
|
+
background: string;
|
|
17
|
+
colorOutlined: string;
|
|
18
|
+
backgroundOutlined: string;
|
|
19
|
+
};
|
|
14
20
|
GREEN: {
|
|
15
21
|
color: string;
|
|
16
22
|
background: string;
|
|
@@ -15,6 +15,12 @@ exports.TagColors = {
|
|
|
15
15
|
colorOutlined: utils_1.colors.dark.base,
|
|
16
16
|
backgroundOutlined: utils_1.colors.dark.base40
|
|
17
17
|
},
|
|
18
|
+
DARK_GREY: {
|
|
19
|
+
color: 'white',
|
|
20
|
+
background: utils_1.colors.dark.base80,
|
|
21
|
+
colorOutlined: utils_1.colors.dark.base,
|
|
22
|
+
backgroundOutlined: utils_1.colors.dark.base40
|
|
23
|
+
},
|
|
18
24
|
GREEN: {
|
|
19
25
|
color: 'white',
|
|
20
26
|
background: utils_1.colors.green.base,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagColors.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/TagColors.ts"],"names":[],"mappings":";;;AAAA,wCAAwC;AAE3B,QAAA,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAM,CAAC,KAAK,CAAC,IAAI;QACxB,UAAU,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QAC5B,aAAa,EAAE,cAAM,CAAC,KAAK,CAAC,IAAI;QAChC,kBAAkB,EAAE,cAAM,CAAC,IAAI,CAAC,MAAM;KACvC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,cAAM,CAAC,IAAI,CAAC,MAAM;QAC9B,aAAa,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QAC/B,kBAAkB,EAAE,cAAM,CAAC,IAAI,CAAC,MAAM;KACvC;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,cAAM,CAAC,KAAK,CAAC,IAAI;QAC7B,aAAa,EAAE,cAAM,CAAC,KAAK,CAAC,IAAI;QAChC,kBAAkB,EAAE,cAAM,CAAC,KAAK,CAAC,MAAM;KACxC;IACD,WAAW,EAAE;QACX,KAAK,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QACvB,UAAU,EAAE,cAAM,CAAC,UAAU,CAAC,MAAM;QACpC,aAAa,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QAC/B,kBAAkB,EAAE,cAAM,CAAC,UAAU,CAAC,MAAM;KAC7C;IACD,aAAa,EAAE;QACb,KAAK,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QACvB,UAAU,EAAE,cAAM,CAAC,UAAU,CAAC,MAAM;QACpC,aAAa,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QAC/B,kBAAkB,EAAE,cAAM,CAAC,UAAU,CAAC,MAAM;KAC7C;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,cAAM,CAAC,IAAI,CAAC,MAAM;QACzB,UAAU,EAAE,cAAM,CAAC,IAAI,CAAC,MAAM;QAC9B,aAAa,EAAE,cAAM,CAAC,IAAI,CAAC,MAAM;QACjC,kBAAkB,EAAE,cAAM,CAAC,IAAI,CAAC,MAAM;KACvC;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,cAAM,CAAC,MAAM,CAAC,IAAI;QAC9B,aAAa,EAAE,cAAM,CAAC,MAAM,CAAC,IAAI;QACjC,kBAAkB,EAAE,cAAM,CAAC,MAAM,CAAC,MAAM;KACzC;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QACvB,UAAU,EAAE,cAAM,CAAC,MAAM,CAAC,MAAM;QAChC,aAAa,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QAC/B,kBAAkB,EAAE,cAAM,CAAC,MAAM,CAAC,MAAM;KACzC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QACvB,UAAU,EAAE,cAAM,CAAC,IAAI,CAAC,MAAM;QAC9B,aAAa,EAAE,cAAM,CAAC,IAAI,CAAC,IAAI;QAC/B,kBAAkB,EAAE,cAAM,CAAC,IAAI,CAAC,MAAM;KACvC;IACD,GAAG,EAAE;QACH,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,cAAM,CAAC,GAAG,CAAC,IAAI;QAC3B,aAAa,EAAE,cAAM,CAAC,GAAG,CAAC,IAAI;QAC9B,kBAAkB,EAAE,cAAM,CAAC,GAAG,CAAC,MAAM;KACtC;IACD,KAAK,EAAE;QACL,KAAK,EAAE,cAAM,CAAC,KAAK,CAAC,IAAI;QACxB,UAAU,EAAE,OAAO;QACnB,aAAa,EAAE,cAAM,CAAC,KAAK,CAAC,IAAI;QAChC,kBAAkB,EAAE,OAAO;KAC5B;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"TagColors.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/TagColors.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,10 @@ export interface TagProps {
|
|
|
3
3
|
labels: string[];
|
|
4
4
|
appearance?: TagAppearance;
|
|
5
5
|
color?: TagColorsTypes;
|
|
6
|
+
dataTest?: string;
|
|
6
7
|
icon?: ReactElement<Element>;
|
|
7
8
|
isOutlined?: boolean;
|
|
8
|
-
|
|
9
|
+
numberOfTags?: number;
|
|
9
10
|
onClose?(): void;
|
|
10
11
|
}
|
|
11
12
|
export declare enum TagAppearance {
|
|
@@ -15,6 +16,7 @@ export declare enum TagAppearance {
|
|
|
15
16
|
export declare enum TagColorsTypes {
|
|
16
17
|
BLUE = "BLUE",
|
|
17
18
|
DARK = "DARK",
|
|
19
|
+
DARK_GREY = "DARK_GREY",
|
|
18
20
|
GREEN = "GREEN",
|
|
19
21
|
GREEN_LIGHT = "GREEN_LIGHT",
|
|
20
22
|
GREEN_LIGHTER = "GREEN_LIGHTER",
|
|
@@ -10,6 +10,7 @@ var TagColorsTypes;
|
|
|
10
10
|
(function (TagColorsTypes) {
|
|
11
11
|
TagColorsTypes["BLUE"] = "BLUE";
|
|
12
12
|
TagColorsTypes["DARK"] = "DARK";
|
|
13
|
+
TagColorsTypes["DARK_GREY"] = "DARK_GREY";
|
|
13
14
|
TagColorsTypes["GREEN"] = "GREEN";
|
|
14
15
|
TagColorsTypes["GREEN_LIGHT"] = "GREEN_LIGHT";
|
|
15
16
|
TagColorsTypes["GREEN_LIGHTER"] = "GREEN_LIGHTER";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/interfaces.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/interfaces.ts"],"names":[],"mappings":";;;AAaA,IAAY,aAGX;AAHD,WAAY,aAAa;IACvB,sCAAqB,CAAA;IACrB,sCAAqB,CAAA;AACvB,CAAC,EAHW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAGxB;AAED,IAAY,cAaX;AAbD,WAAY,cAAc;IACxB,+BAAa,CAAA;IACb,+BAAa,CAAA;IACb,yCAAuB,CAAA;IACvB,iCAAe,CAAA;IACf,6CAA2B,CAAA;IAC3B,iDAA+B,CAAA;IAC/B,+BAAa,CAAA;IACb,+BAAa,CAAA;IACb,mCAAiB,CAAA;IACjB,+CAA6B,CAAA;IAC7B,6BAAW,CAAA;IACX,iCAAe,CAAA;AACjB,CAAC,EAbW,cAAc,GAAd,sBAAc,KAAd,sBAAc,QAazB"}
|