contentoh-components-library 21.6.23 → 21.6.25
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/.env.test +1 -0
- package/dist/_utils/helper.js +47 -2
- package/dist/components/organisms/LinkVariantsModal/index.js +852 -340
- package/dist/components/organisms/LinkVariantsModal/styles.js +40 -18
- package/dist/components/pages/ProviderProductEdition/index.js +193 -110
- package/dist/components/pages/ProviderProductEdition/styles.js +4 -1
- package/package.json +1 -1
- package/src/_utils/helper.js +40 -0
- package/src/components/organisms/LinkVariantsModal/index.js +774 -283
- package/src/components/organisms/LinkVariantsModal/styles.js +228 -72
- package/src/components/pages/ProviderProductEdition/index.js +71 -9
- package/src/components/pages/ProviderProductEdition/styles.js +6 -3
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.Tabs = exports.Section = exports.SearchRow = exports.Panel = exports.Paging = exports.Overlay = exports.ModeSwitch = exports.Message = exports.List = exports.ImageGrid = exports.Header = exports.Footer = exports.Choices = exports.Body = exports.Block = exports.AttributeList = exports.AddRetailer = void 0;
|
|
9
9
|
|
|
10
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
11
11
|
|
|
@@ -15,58 +15,80 @@ require("../../../global-files/global-styles.css");
|
|
|
15
15
|
|
|
16
16
|
var _variables = require("../../../global-files/variables");
|
|
17
17
|
|
|
18
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
19
|
+
|
|
20
|
+
// Rosa ContentOh. Va aquí y no en variables.js porque cambiar la constante
|
|
21
|
+
// global tocaría todos los componentes que ya la usan; este modal es lo que hay
|
|
22
|
+
// que alinear con la marca.
|
|
23
|
+
var PINK = "#E13AA8";
|
|
24
|
+
var PINK_RGB = "225, 58, 168"; // accent-color pinta el relleno de checkboxes y radios con el color de marca en
|
|
25
|
+
// vez del azul del sistema, sin reemplazarlos por divs: siguen siendo controles
|
|
26
|
+
// nativos, con su foco y su navegación por teclado intactos.
|
|
27
|
+
|
|
28
|
+
var controls = "\n input[type=\"checkbox\"],\n input[type=\"radio\"] {\n accent-color: ".concat(PINK, ";\n width: 15px;\n height: 15px;\n cursor: pointer;\n }\n");
|
|
19
29
|
|
|
20
30
|
var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: fixed;\n inset: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(40, 31, 51, 0.45);\n"])));
|
|
21
31
|
|
|
22
32
|
exports.Overlay = Overlay;
|
|
23
33
|
|
|
24
|
-
var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: min(680px, 92vw);\n max-height: 86vh;\n border-radius: 10px;\n background-color: ", ";\n font-family: ", ";\n overflow: hidden;\n"])), _variables.GlobalColors.white, _variables.FontFamily.Raleway);
|
|
34
|
+
var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n display: flex;\n flex-direction: column;\n width: min(680px, 92vw);\n max-height: 86vh;\n border-radius: 10px;\n background-color: ", ";\n font-family: ", ";\n overflow: hidden;\n"])), controls, _variables.GlobalColors.white, _variables.FontFamily.Raleway);
|
|
25
35
|
|
|
26
36
|
exports.Panel = Panel;
|
|
27
37
|
|
|
28
|
-
var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 20px 24px 12px;\n\n h2 {\n margin: 0;\n font-family: ", ";\n font-size:
|
|
38
|
+
var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 20px 24px 12px;\n\n h2 {\n margin: 0;\n font-family: ", ";\n font-size: 17px;\n color: ", ";\n }\n\n p {\n margin: 4px 0 0;\n font-size: 13px;\n color: ", ";\n }\n\n .close {\n border: none;\n background: none;\n cursor: pointer;\n font-size: 21px;\n line-height: 1;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_700, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
|
|
29
39
|
|
|
30
40
|
exports.Header = Header;
|
|
31
41
|
|
|
32
|
-
var ModeSwitch = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n padding: 0 24px 16px;\n\n button {\n flex: 1;\n padding: 10px 12px;\n border-radius: 6px;\n border: 1px solid ", ";\n background-color: ", ";\n font-family: ", ";\n font-size:
|
|
42
|
+
var ModeSwitch = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n padding: 0 24px 16px;\n\n button {\n flex: 1;\n padding: 10px 12px;\n border-radius: 6px;\n border: 1px solid ", ";\n background-color: ", ";\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n text-align: left;\n }\n\n button.active {\n border-color: ", ";\n color: ", ";\n background-color: rgba(", ", 0.08);\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600, _variables.GlobalColors.gray, PINK, PINK, PINK_RGB);
|
|
33
43
|
|
|
34
44
|
exports.ModeSwitch = ModeSwitch;
|
|
35
45
|
|
|
36
|
-
var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n overflow-y: auto;\n padding: 0 24px;\n"])));
|
|
46
|
+
var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n overflow-y: auto;\n padding: 0 24px;\n\n .apply-all {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n margin-bottom: 12px;\n padding: 10px 12px;\n border-radius: 6px;\n background-color: ", ";\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n .apply-all .hint {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
|
|
37
47
|
|
|
38
48
|
exports.Body = Body;
|
|
39
49
|
|
|
40
|
-
var SearchRow = _styledComponents.default.form(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n\n input {\n flex: 1;\n height: 36px;\n padding: 0 12px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size:
|
|
50
|
+
var SearchRow = _styledComponents.default.form(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n\n input {\n flex: 1;\n height: 36px;\n padding: 0 12px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n }\n\n button {\n height: 36px;\n padding: 0 18px;\n border: none;\n border-radius: 6px;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: 13px;\n cursor: pointer;\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600);
|
|
41
51
|
|
|
42
52
|
exports.SearchRow = SearchRow;
|
|
43
53
|
|
|
44
|
-
var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0 0 16px;\n padding: 0;\n border: 1px solid ", ";\n border-radius: 6px;\n\n li + li {\n border-top: 1px solid ", ";\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n font-size:
|
|
54
|
+
var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0 0 16px;\n padding: 0;\n border: 1px solid ", ";\n border-radius: 6px;\n\n li + li {\n border-top: 1px solid ", ";\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n font-size: 13px;\n color: ", ";\n }\n\n .meta {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n\n .logo {\n width: 24px;\n height: 24px;\n object-fit: contain;\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .count {\n margin-left: auto;\n font-size: 12px;\n color: ", ";\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, PINK);
|
|
45
55
|
|
|
46
56
|
exports.List = List;
|
|
47
|
-
var AttributeList = (0, _styledComponents.default)(List)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n max-height: 220px;\n overflow-y: auto;\n\n .note {\n display: block;\n font-size:
|
|
57
|
+
var AttributeList = (0, _styledComponents.default)(List)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n max-height: 220px;\n overflow-y: auto;\n\n .note {\n display: block;\n font-size: 11px;\n font-style: italic;\n color: ", ";\n }\n\n .value {\n margin-left: auto;\n max-width: 45%;\n font-size: 12px;\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.gray, _variables.GlobalColors.gray);
|
|
48
58
|
exports.AttributeList = AttributeList;
|
|
49
59
|
|
|
50
|
-
var Section = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 16px;\n\n h3 {\n margin: 0 0 8px;\n font-family: ", ";\n font-size:
|
|
60
|
+
var Section = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 16px;\n\n h3 {\n margin: 0 0 8px;\n font-family: ", ";\n font-size: 14px;\n color: ", ";\n }\n\n label.choice {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 0;\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n label.choice span.hint {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
|
|
51
61
|
|
|
52
62
|
exports.Section = Section;
|
|
53
63
|
|
|
54
|
-
var Message = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 12px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size:
|
|
64
|
+
var Message = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 12px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size: 13px;\n line-height: 1.4;\n background-color: ", ";\n color: ", ";\n\n &.error {\n background-color: rgba(", ", 0.1);\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK_RGB, PINK);
|
|
55
65
|
|
|
56
66
|
exports.Message = Message;
|
|
57
67
|
|
|
58
|
-
var Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ", ";\n\n .summary {\n font-size:
|
|
68
|
+
var Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ", ";\n\n .summary {\n font-size: 13px;\n color: ", ";\n }\n\n .actions {\n display: flex;\n gap: 8px;\n margin-left: auto;\n }\n\n button {\n height: 36px;\n padding: 0 18px;\n border-radius: 6px;\n font-family: ", ";\n font-size: 13px;\n cursor: pointer;\n }\n\n button.secondary {\n border: 1px solid ", ";\n background-color: ", ";\n color: ", ";\n }\n\n button.primary {\n border: none;\n background-color: ", ";\n color: ", ";\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.GlobalColors.gray, PINK, _variables.GlobalColors.white);
|
|
59
69
|
|
|
60
70
|
exports.Footer = Footer;
|
|
61
71
|
|
|
62
|
-
var
|
|
72
|
+
var ImageGrid = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));\n gap: 8px;\n margin-bottom: 16px;\n\n label {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 6px;\n border: 1px solid ", ";\n border-radius: 6px;\n cursor: pointer;\n }\n\n label.picked {\n border-color: ", ";\n background-color: rgba(", ", 0.06);\n }\n\n label.locked {\n cursor: default;\n }\n\n label input {\n position: absolute;\n top: 8px;\n left: 8px;\n }\n\n label img {\n width: 100%;\n height: 72px;\n object-fit: contain;\n background-color: ", ";\n border-radius: 4px;\n }\n\n label span {\n font-size: 11px;\n color: ", ";\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, PINK, PINK_RGB, _variables.GlobalColors.s2, _variables.GlobalColors.gray);
|
|
63
73
|
|
|
64
|
-
exports.
|
|
74
|
+
exports.ImageGrid = ImageGrid;
|
|
65
75
|
|
|
66
|
-
var
|
|
76
|
+
var AddRetailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 16px;\n\n select {\n flex: 1 1 140px;\n min-width: 0;\n height: 32px;\n padding: 0 8px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n background-color: ", ";\n }\n\n button {\n height: 32px;\n padding: 0 14px;\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n select:disabled {\n opacity: 0.5;\n cursor: default;\n }\n\n button:disabled {\n opacity: 0.4;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK);
|
|
67
77
|
|
|
68
|
-
exports.
|
|
78
|
+
exports.AddRetailer = AddRetailer;
|
|
79
|
+
|
|
80
|
+
var Block = _styledComponents.default.section(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid ", ";\n\n &:last-of-type {\n border-bottom: none;\n }\n\n h3 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 8px;\n font-family: ", ";\n font-size: 14px;\n color: ", ";\n }\n\n h3 .paso {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background-color: ", ";\n color: ", ";\n font-size: 11px;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.white);
|
|
81
|
+
|
|
82
|
+
exports.Block = Block;
|
|
83
|
+
|
|
84
|
+
var Choices = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-bottom: 10px;\n\n label {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 4px 0;\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n label .hint {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n"])), _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
|
|
85
|
+
|
|
86
|
+
exports.Choices = Choices;
|
|
87
|
+
|
|
88
|
+
var Paging = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin: -8px 0 16px;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n\n button {\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n padding: 5px 12px;\n cursor: pointer;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_600, PINK);
|
|
89
|
+
|
|
90
|
+
exports.Paging = Paging;
|
|
69
91
|
|
|
70
|
-
var
|
|
92
|
+
var Tabs = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 16px;\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n\n button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n max-width: 200px;\n padding: 6px 10px;\n border: 1px solid ", ";\n border-radius: 6px;\n background-color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n button.active {\n border-color: ", ";\n color: ", ";\n background-color: rgba(", ", 0.08);\n }\n\n button .orden {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background-color: ", ";\n font-size: 10px;\n flex-shrink: 0;\n }\n\n button.active .orden {\n background-color: ", ";\n color: ", ";\n }\n\n button .listo {\n color: ", ";\n flex-shrink: 0;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, PINK, PINK, PINK_RGB, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.white, PINK);
|
|
71
93
|
|
|
72
|
-
exports.
|
|
94
|
+
exports.Tabs = Tabs;
|