@proprioo/salatim 18.6.0 → 19.2.0

package/lib/ui/src/subtitle/Subtitle.styles.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -24,16 +20,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.Layout = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var Title_styles_1 = require("../title/Title.styles");
-exports.Layout = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-exports.Label = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n\n  ", ";\n"], ["\n  ", ";\n  color: ", ";\n\n  ",
-    ";\n"])), Title_styles_1.h5, function (_a) {
-    var color = _a.color;
-    return color;
-}, function (_a) {
-    var isAlternative = _a.isAlternative;
-    return isAlternative && styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), Title_styles_1.h6);
-});
-var templateObject_1, templateObject_2, templateObject_3;
+const styled_components_1 = __importStar(require("styled-components"));
+const Title_styles_1 = require("../title/Title.styles");
+exports.Layout = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+exports.Label = styled_components_1.default.div `
+  ${Title_styles_1.h5};
+  color: ${({ color }) => color};
+
+  ${({ isAlternative }) => isAlternative &&
+    (0, styled_components_1.css) `
+      ${Title_styles_1.h6}
+    `};
+`;
 //# sourceMappingURL=Subtitle.styles.js.map

package/lib/ui/src/subtitle/Subtitle.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Subtitle.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/subtitle/Subtitle.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAEhD,sDAA+C;AAElC,QAAA,MAAM,GAAG,2BAAM,CAAC,GAAG,iHAAA,8CAG/B,KAAC;AAEW,QAAA,KAAK,GAAG,2BAAM,CAAC,GAAG,2GAA2C,MACtE,EAAE,cACK,EAAoB,SAE3B;IAIC,KACJ,KARG,iBAAE,EACK,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK;AAAL,CAAK,EAE3B,UAAC,EAAiB;QAAf,aAAa,mBAAA;IAChB,OAAA,aAAa,IACb,uBAAG,uFAAA,UACC,EAAE,QACL,KADG,iBAAE,CACL;AAHD,CAGC,EACH"}
+{"version":3,"file":"Subtitle.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/subtitle/Subtitle.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,uEAAgD;AAEhD,wDAA+C;AAElC,QAAA,MAAM,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAG/B,CAAC;AAEW,QAAA,KAAK,GAAG,2BAAM,CAAC,GAAG,CAA2C;IACtE,iBAAE;WACK,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK;;IAE3B,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,IAAA,uBAAG,EAAA;QACC,iBAAE;KACL;CACJ,CAAC"}

package/lib/ui/src/subtitle/Subtitle.test.js

@@ -1,32 +1,21 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@testing-library/react");
-var Subtitle_1 = __importDefault(require("./Subtitle"));
-var defaultProps = {
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Subtitle_1 = __importDefault(require("./Subtitle"));
+const defaultProps = {
     text: 'LOCALISATION'
 };
-describe('Subtitle component', function () {
-    it('should render component', function () {
-        react_2.render(react_1.default.createElement(Subtitle_1.default, __assign({}, defaultProps)));
+describe('Subtitle component', () => {
+    it('should render component', () => {
+        (0, react_2.render)(react_1.default.createElement(Subtitle_1.default, Object.assign({}, defaultProps)));
         expect(react_2.screen.getByTestId('subtitle')).toBeInTheDocument();
     });
-    it('should render children', function () {
-        react_2.render(react_1.default.createElement(Subtitle_1.default, __assign({}, defaultProps)));
+    it('should render children', () => {
+        (0, react_2.render)(react_1.default.createElement(Subtitle_1.default, Object.assign({}, defaultProps)));
         expect(react_2.screen.getByTestId('subtitle-label')).toBeInTheDocument();
     });
 });

package/lib/ui/src/subtitle/Subtitle.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Subtitle.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/subtitle/Subtitle.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA0B;AAE1B,gDAAwD;AAExD,wDAAqD;AAErD,IAAM,YAAY,GAAkB;IAClC,IAAI,EAAE,cAAc;CACrB,CAAC;AAEF,QAAQ,CAAC,oBAAoB,EAAE;IAC7B,EAAE,CAAC,yBAAyB,EAAE;QAC5B,cAAM,CAAC,8BAAC,kBAAQ,eAAK,YAAY,EAAI,CAAC,CAAC;QAEvC,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE;QAC3B,cAAM,CAAC,8BAAC,kBAAQ,eAAK,YAAY,EAAI,CAAC,CAAC;QAEvC,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Subtitle.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/subtitle/Subtitle.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,kDAAwD;AAExD,0DAAqD;AAErD,MAAM,YAAY,GAAkB;IAClC,IAAI,EAAE,cAAc;CACrB,CAAC;AAEF,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,IAAA,cAAM,EAAC,8BAAC,kBAAQ,oBAAK,YAAY,EAAI,CAAC,CAAC;QAEvC,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;QAChC,IAAA,cAAM,EAAC,8BAAC,kBAAQ,oBAAK,YAAY,EAAI,CAAC,CAAC;QAEvC,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/ui/src/tag/Tag.js

@@ -1,26 +1,45 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var CloseBox_1 = __importDefault(require("../icons/CloseBox"));
-var interfaces_1 = require("./interfaces");
-var Tag_styles_1 = require("./Tag.styles");
-var Tag = function (_a) {
-    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;
-    var tagsToDisplay = labels.slice(0, numberOfTags);
-    var tagsToHide = labels.slice(numberOfTags);
-    return (react_1.default.createElement(Tag_styles_1.TagLayout, { hasMultipleTags: Boolean(labels.length) },
-        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 },
+const react_1 = __importStar(require("react"));
+const CloseBox_1 = __importDefault(require("../icons/CloseBox"));
+const interfaces_1 = require("./interfaces");
+const Tag_styles_1 = require("./Tag.styles");
+const Tag = ({ labels, appearance, color, icon, isOutlined, dataTest, numberOfTags = labels.length, onClose }) => {
+    const tagsToDisplay = labels.slice(0, numberOfTags);
+    const tagsToHide = labels.slice(numberOfTags);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        tagsToDisplay.map((tag, index) => (react_1.default.createElement(Tag_styles_1.BasicTag, { appearance: appearance, color: color, isOutlined: isOutlined, icon: !!icon, close: !!onClose, "data-test": dataTest, key: index },
             icon && (react_1.default.createElement(Tag_styles_1.IconWrapper, { color: color, "data-test": "tag-icon" }, icon)),
             tag,
             onClose && (react_1.default.createElement(Tag_styles_1.TagCloser, { onClick: onClose, "data-test": "tag-closer" },
-                react_1.default.createElement(CloseBox_1.default, null))))); }),
+                react_1.default.createElement(CloseBox_1.default, null)))))),
         Boolean(tagsToHide.length) && (react_1.default.createElement(Tag_styles_1.TagList, { "data-test": "list-tag" },
             react_1.default.createElement(Tag_styles_1.BasicTag, { appearance: appearance, color: color, isOutlined: isOutlined, icon: !!icon, "data-test": dataTest },
-                icon && (react_1.default.createElement(Tag_styles_1.IconWrapper, { color: color, "data-test": "tag-icon" }, icon)), "+ " + tagsToHide.length),
-            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)); }))))));
+                icon && (react_1.default.createElement(Tag_styles_1.IconWrapper, { color: color, "data-test": "tag-icon" }, icon)),
+                `+ ${tagsToHide.length}`),
+            react_1.default.createElement(Tag_styles_1.List, { color: color, appearance: appearance }, tagsToHide.map((label, index) => (react_1.default.createElement(Tag_styles_1.TagElement, { key: index, "data-test": "tag-element" }, label))))))));
 };
 Tag.defaultProps = {
     appearance: interfaces_1.TagAppearance.CUSTOMER,

package/lib/ui/src/tag/Tag.js.map

@@ -1 +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,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;QAC/C,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"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA4C;AAE5C,iEAAyC;AACzC,6CAAuE;AACvE,6CAOsB;AAEtB,MAAM,GAAG,GAAiB,CAAC,EACzB,MAAM,EACN,UAAU,EACV,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,YAAY,GAAG,MAAM,CAAC,MAAM,EAC5B,OAAO,EACR,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,gBAAQ;QACN,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,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,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;gBACA,KAAK,UAAU,CAAC,MAAM,EAAE,CAChB;YACX,8BAAC,iBAAI,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,IACvC,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,8BAAC,uBAAU,IAAC,GAAG,EAAE,KAAK,eAAY,aAAa,IAC5C,KAAK,CACK,CACd,CAAC,CACG,CACC,CACX,CACQ,CACZ,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"}

package/lib/ui/src/tag/Tag.stories.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -33,29 +22,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var addon_actions_1 = require("@storybook/addon-actions");
-var addon_knobs_1 = require("@storybook/addon-knobs");
-var react_2 = require("@storybook/react");
-var utils_1 = require("../../../utils");
-var icons_1 = __importDefault(require("../icons"));
-var interfaces_1 = require("./interfaces");
-var Tag_1 = __importDefault(require("./Tag"));
-var EmoticonCool = icons_1.default.EmoticonCool;
-var knobs = function () { return ({
-    appearance: addon_knobs_1.select('Appearance', interfaces_1.TagAppearance, interfaces_1.TagAppearance.CUSTOMER),
-    color: addon_knobs_1.select('Color', interfaces_1.TagColorsTypes, interfaces_1.TagColorsTypes.ORANGE),
-    labels: addon_knobs_1.select('Label', {
+const react_1 = __importStar(require("react"));
+const addon_actions_1 = require("@storybook/addon-actions");
+const addon_knobs_1 = require("@storybook/addon-knobs");
+const react_2 = require("@storybook/react");
+const utils_1 = require("../../../utils");
+const icons_1 = __importDefault(require("../icons"));
+const interfaces_1 = require("./interfaces");
+const Tag_1 = __importDefault(require("./Tag"));
+const { EmoticonCool } = icons_1.default;
+const knobs = () => ({
+    appearance: (0, addon_knobs_1.select)('Appearance', interfaces_1.TagAppearance, interfaces_1.TagAppearance.CUSTOMER),
+    color: (0, addon_knobs_1.select)('Color', interfaces_1.TagColorsTypes, interfaces_1.TagColorsTypes.ORANGE),
+    labels: (0, addon_knobs_1.select)('Label', {
         Simple: ['Pain au chocolat'],
         Multiple: ['Pain au chocolat', 'Chocolatine', 'Croustilune', 'Ensamaida']
     }, ['Pain au chocolat']),
-    isOutlined: addon_knobs_1.boolean('Outlined', false),
-    numberOfTags: addon_knobs_1.number('Number of tags to display', 4)
-}); };
-react_2.storiesOf('Tag', module)
-    .add('Basic', function () {
-    var props = __assign({}, knobs());
-    var style = {
+    isOutlined: (0, addon_knobs_1.boolean)('Outlined', false),
+    numberOfTags: (0, addon_knobs_1.number)('Number of tags to display', 4)
+});
+(0, react_2.storiesOf)('Tag', module)
+    .add('Basic', () => {
+    const props = Object.assign({}, knobs());
+    const style = {
         minHeight: props.labels.length > 1 ? '100px' : 0,
         display: 'flex',
         alignItems: 'flex-end',
@@ -66,11 +55,11 @@ react_2.storiesOf('Tag', module)
     };
     return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement("div", { style: style },
-            react_1.default.createElement(Tag_1.default, __assign({}, props)))));
+            react_1.default.createElement(Tag_1.default, Object.assign({}, props)))));
 })
-    .add('With icon', function () {
-    var props = __assign(__assign({}, knobs()), { icon: react_1.default.createElement(EmoticonCool, null) });
-    var style = {
+    .add('With icon', () => {
+    const props = Object.assign(Object.assign({}, knobs()), { icon: react_1.default.createElement(EmoticonCool, null) });
+    const style = {
         minHeight: props.labels.length > 1 ? '100px' : 0,
         display: 'flex',
         alignItems: 'flex-end',
@@ -80,11 +69,11 @@ react_2.storiesOf('Tag', module)
             : 'transparent'
     };
     return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(Tag_1.default, __assign({}, props))));
+        react_1.default.createElement(Tag_1.default, Object.assign({}, props))));
 })
-    .add('With close action', function () {
-    var props = __assign(__assign({}, knobs()), { onClose: addon_actions_1.action('onClose') });
-    var style = {
+    .add('With close action', () => {
+    const props = Object.assign(Object.assign({}, knobs()), { onClose: (0, addon_actions_1.action)('onClose') });
+    const style = {
         minHeight: props.labels.length > 1 ? '100px' : 0,
         display: 'flex',
         alignItems: 'flex-end',
@@ -94,6 +83,6 @@ react_2.storiesOf('Tag', module)
             : 'transparent'
     };
     return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(Tag_1.default, __assign({}, props))));
+        react_1.default.createElement(Tag_1.default, Object.assign({}, props))));
 });
 //# sourceMappingURL=Tag.stories.js.map

package/lib/ui/src/tag/Tag.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.stories.tsx"],"names":[],"mappings":"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"}

package/lib/ui/src/tag/Tag.styles.d.ts

@@ -7,9 +7,6 @@ export declare const TagBase: import("styled-components").FlattenSimpleInterpola
 export declare const TAG_BUSINESS_BASE: import("styled-components").FlattenSimpleInterpolation;
 export declare const BasicTag: import("styled-components").StyledComponent<"span", any, Pick<TagProps, "appearance" | "color" | "isOutlined"> & TagBaseProps, never>;
 export declare const TagCloser: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TagLayout: import("styled-components").StyledComponent<"div", any, {
-    hasMultipleTags: boolean;
-}, never>;
 export declare const TagElement: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const List: import("styled-components").StyledComponent<"ul", any, Pick<TagProps, "appearance" | "color">, never>;
 export declare const TagList: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/ui/src/tag/Tag.styles.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -23,48 +19,146 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconWrapper = exports.TagList = exports.List = exports.TagElement = exports.TagLayout = exports.TagCloser = exports.BasicTag = exports.TAG_BUSINESS_BASE = exports.TagBase = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var utils_1 = require("../../../utils");
-var interfaces_1 = require("./interfaces");
-var TagColors_1 = require("./TagColors");
-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));
-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));
-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  ",
-    "}\n\n  \n\n  ",
-    "\n  \n  ",
-    "\n"])), exports.TagBase, function (_a) {
-    var appearance = _a.appearance, color = _a.color, isOutlined = _a.isOutlined;
-    return appearance === interfaces_1.TagAppearance.BUSINESS
-        ? styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          ", ";\n          \n          ", "}\n        "], ["\n          ", ";\n          \n          ",
-            "}\n        "])), exports.TAG_BUSINESS_BASE, color &&
-            (isOutlined
-                ? 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 &&
+exports.IconWrapper = exports.TagList = exports.List = exports.TagElement = exports.TagCloser = exports.BasicTag = exports.TAG_BUSINESS_BASE = exports.TagBase = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../../utils");
+const interfaces_1 = require("./interfaces");
+const TagColors_1 = require("./TagColors");
+exports.TagBase = (0, styled_components_1.css) `
+  ${utils_1.ArchivoFont};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${utils_1.radius.biggest};
+  font-size: ${utils_1.fonts.small};
+  line-height: ${(0, utils_1.convertPxToRem)(16)};
+  min-width: ${(0, utils_1.convertPxToRem)(24)};
+  padding: ${(0, utils_1.convertPxToRem)(4)} ${(0, utils_1.convertPxToRem)(16)};
+
+  &:not(:only-of-type) {
+    margin: ${(0, utils_1.convertPxToRem)(2)} ${(0, utils_1.convertPxToRem)(4)} ${(0, utils_1.convertPxToRem)(2)} 0;
+  }
+`;
+exports.TAG_BUSINESS_BASE = (0, styled_components_1.css) `
+  font-size: ${utils_1.fonts.smallest};
+  border-radius: ${(0, utils_1.convertPxToRem)(3)};
+  padding: ${(0, utils_1.convertPxToRem)(4)};
+  text-transform: uppercase;
+  font-weight: bold;
+`;
+exports.BasicTag = styled_components_1.default.span `
+  ${exports.TagBase};
+
+  ${({ appearance, color, isOutlined }) => appearance === interfaces_1.TagAppearance.BUSINESS
+    ? (0, styled_components_1.css) `
+          ${exports.TAG_BUSINESS_BASE};
+          
+          ${color &&
         (isOutlined
-            ? 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));
-}, function (_a) {
-    var icon = _a.icon;
-    return icon && styled_components_1.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), utils_1.convertPxToRem(8));
-}, function (_a) {
-    var close = _a.close;
-    return close && styled_components_1.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), utils_1.convertPxToRem(8));
-});
-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));
-exports.TagLayout = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
-    "\n"])), function (_a) {
-    var hasMultipleTags = _a.hasMultipleTags;
-    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));
-});
-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));
-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  ",
-    ";\n\n  ",
-    ";\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) {
-    var appearance = _a.appearance;
-    return appearance === interfaces_1.TagAppearance.BUSINESS && exports.TAG_BUSINESS_BASE;
-}, function (props) {
-    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);
-});
-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);
-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));
-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;
+            ? (0, styled_components_1.css) `
+                  color: ${TagColors_1.TagColors[color].colorOutlined};
+                  border: 1px solid ${TagColors_1.TagColors[color].backgroundOutlined};
+                  background: white;
+                `
+            : (0, styled_components_1.css) `
+                  color: ${TagColors_1.TagColors[color].color};
+                  background: ${TagColors_1.TagColors[color].background};
+                `)}}
+        `
+    : color &&
+        (isOutlined
+            ? (0, styled_components_1.css) `
+              color: ${TagColors_1.TagColors[color].colorOutlined};
+              background: ${TagColors_1.TagColors[color].backgroundOutlined};
+            `
+            : (0, styled_components_1.css) `
+              color: ${TagColors_1.TagColors[color].color};
+              background: ${TagColors_1.TagColors[color].background};
+            `)}}
+
+  
+
+  ${({ icon }) => icon &&
+    (0, styled_components_1.css) `
+      padding-left: ${(0, utils_1.convertPxToRem)(8)};
+    `}
+  
+  ${({ close }) => close &&
+    (0, styled_components_1.css) `
+      padding-right: ${(0, utils_1.convertPxToRem)(8)};
+    `}
+`;
+exports.TagCloser = styled_components_1.default.div `
+  width: ${(0, utils_1.convertPxToRem)(16)};
+  height: ${(0, utils_1.convertPxToRem)(16)};
+  margin-left: ${(0, utils_1.convertPxToRem)(8)};
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+
+  &:active,
+  &:focus {
+    outline: unset;
+  }
+`;
+exports.TagElement = styled_components_1.default.li `
+  white-space: nowrap;
+  line-height: ${(0, utils_1.convertPxToRem)(16)};
+`;
+exports.List = styled_components_1.default.ul `
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  padding: ${(0, utils_1.convertPxToRem)(8)} ${(0, utils_1.convertPxToRem)(12)};
+  border-radius: ${utils_1.radius.normal};
+  box-shadow: ${utils_1.shadows.level2};
+  font-size: ${utils_1.fonts.small};
+  list-style-type: none;
+
+  ${({ appearance }) => appearance === interfaces_1.TagAppearance.BUSINESS && exports.TAG_BUSINESS_BASE};
+
+  ${props => props.color &&
+    (0, styled_components_1.css) `
+      color: ${TagColors_1.TagColors[props.color].color};
+      background: ${TagColors_1.TagColors[props.color].background};
+    `};
+`;
+exports.TagList = styled_components_1.default.div `
+  position: relative;
+  display: inline-block;
+
+  &:hover ${exports.List} {
+    display: block;
+  }
+
+  ${exports.BasicTag} ~ & {
+    margin-left: ${(0, utils_1.convertPxToRem)(4)};
+  }
+
+  ${exports.BasicTag}:not(:only-of-type) ~ & {
+    margin: 0 0 ${(0, utils_1.convertPxToRem)(2)} 0;
+  }
+`;
+exports.IconWrapper = styled_components_1.default.span `
+  width: ${(0, utils_1.convertPxToRem)(16)};
+  height: ${(0, utils_1.convertPxToRem)(16)};
+  margin-right: ${(0, utils_1.convertPxToRem)(8)};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  path {
+    fill: currentColor;
+  }
+`;
 //# sourceMappingURL=Tag.styles.js.map

package/lib/ui/src/tag/Tag.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tag.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/tag/Tag.styles.ts"],"names":[],"mappings":"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"}