contentoh-components-library 21.6.45 → 21.6.46

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.
Files changed (5) hide show
  1. package/dist/components/organisms/VariantGroupModal/index.js +0 -1
  2. package/dist/components/organisms/VariantGroupModal/styles.js +6 -6
  3. package/package.json +1 -1
  4. package/src/components/organisms/VariantGroupModal/index.js +1 -1
  5. package/src/components/organisms/VariantGroupModal/styles.js +37 -11
package/dist/components/organisms/VariantGroupModal/index.js CHANGED
@@ -283,7 +283,6 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
283
283
  }
284
284
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
285
285
  type: "submit",
286
- className: "secondary",
287
286
  disabled: loading,
288
287
  children: loading ? "Buscando…" : "Buscar"
289
288
  })]
package/dist/components/organisms/VariantGroupModal/styles.js CHANGED
@@ -22,19 +22,19 @@ var Overlay = _styledComponents.default.div(_templateObject || (_templateObject
22
22
 
23
23
  exports.Overlay = Overlay;
24
24
 
25
- var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: min(520px, 94vw);\n max-height: 88vh;\n border-radius: 10px;\n background-color: ", ";\n font-family: ", ";\n overflow: hidden;\n"])), _variables.GlobalColors.white, _variables.FontFamily.Raleway);
25
+ var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: min(560px, 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);
26
26
 
27
27
  exports.Panel = Panel;
28
28
 
29
- var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: 18px 22px 12px;\n\n h2 {\n margin: 0;\n font-family: ", ";\n font-size: 16px;\n color: ", ";\n }\n\n p {\n margin: 6px 0 0;\n font-size: 13px;\n line-height: 1.4;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
29
+ var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 line-height: 1.4;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_700, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
30
30
 
31
31
  exports.Header = Header;
32
32
 
33
- var Body = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 4px 22px 8px;\n"])));
33
+ var Body = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 4px 24px 12px;\n"])));
34
34
 
35
35
  exports.Body = Body;
36
36
 
37
- var SearchRow = _styledComponents.default.form(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n\n input {\n flex: 1;\n min-width: 0;\n height: 38px;\n padding: 0 12px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: inherit;\n font-size: 13px;\n color: ", ";\n }\n\n input:focus {\n outline: none;\n border-color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK);
37
+ var SearchRow = _styledComponents.default.form(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n\n input {\n flex: 1;\n min-width: 0;\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 input:focus {\n outline: none;\n border-color: ", ";\n }\n\n /*\n Estas reglas faltaban y el bot\xF3n se sal\xEDa del panel.\n\n Llevaba className=\"secondary\", pero esa clase solo est\xE1 definida dentro de\n Footer, as\xED que aqu\xED no aplicaba nada: sal\xEDa como un bot\xF3n crudo del\n navegador, sin altura ni ancho acotados. El flex-shrink es para que el texto\n no se parta cuando el campo de b\xFAsqueda se lleva el espacio.\n */\n button {\n flex-shrink: 0;\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, PINK, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600);
38
38
 
39
39
  exports.SearchRow = SearchRow;
40
40
 
@@ -42,7 +42,7 @@ var List = _styledComponents.default.ul(_templateObject6 || (_templateObject6 =
42
42
 
43
43
  exports.List = List;
44
44
 
45
- var NewGroup = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding: 12px;\n border: 1px dashed rgba(", ", 0.5);\n border-radius: 6px;\n background-color: rgba(", ", 0.04);\n\n label {\n display: block;\n margin-bottom: 6px;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n input {\n width: 100%;\n height: 38px;\n padding: 0 12px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: inherit;\n font-size: 13px;\n text-transform: uppercase;\n color: ", ";\n }\n\n input:focus {\n outline: none;\n border-color: ", ";\n }\n\n .ayuda {\n display: block;\n margin-top: 6px;\n font-size: 11px;\n line-height: 1.4;\n color: ", ";\n }\n"])), PINK_RGB, PINK_RGB, _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.gray);
45
+ var NewGroup = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding: 12px;\n border: 1px dashed rgba(", ", 0.5);\n border-radius: 6px;\n background-color: rgba(", ", 0.04);\n\n label {\n display: block;\n margin-bottom: 6px;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n input {\n width: 100%;\n height: 36px;\n padding: 0 12px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: inherit;\n font-size: 13px;\n text-transform: uppercase;\n color: ", ";\n }\n\n input:focus {\n outline: none;\n border-color: ", ";\n }\n\n .ayuda {\n display: block;\n margin-top: 6px;\n font-size: 11px;\n line-height: 1.4;\n color: ", ";\n }\n"])), PINK_RGB, PINK_RGB, _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.gray);
46
46
 
47
47
  exports.NewGroup = NewGroup;
48
48
 
@@ -50,6 +50,6 @@ var Message = _styledComponents.default.p(_templateObject8 || (_templateObject8
50
50
 
51
51
  exports.Message = Message;
52
52
 
53
- var Footer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 14px 22px 18px;\n border-top: 1px solid ", ";\n\n .resumen {\n font-size: 12px;\n color: ", ";\n }\n\n .acciones {\n display: flex;\n gap: 10px;\n }\n\n button {\n height: 38px;\n padding: 0 16px;\n border-radius: 6px;\n cursor: pointer;\n font-family: ", ";\n font-size: 13px;\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n\n .secondary {\n border: 1px solid ", ";\n background: none;\n color: ", ";\n }\n\n .primary {\n border: 1px solid ", ";\n background-color: ", ";\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, PINK, _variables.GlobalColors.white);
53
+ var Footer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (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 .resumen {\n font-size: 12px;\n color: ", ";\n }\n\n .acciones {\n display: flex;\n gap: 10px;\n }\n\n button {\n height: 38px;\n padding: 0 16px;\n border-radius: 6px;\n cursor: pointer;\n font-family: ", ";\n font-size: 13px;\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n\n .secondary {\n border: 1px solid ", ";\n background: none;\n color: ", ";\n }\n\n .primary {\n border: 1px solid ", ";\n background-color: ", ";\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, PINK, _variables.GlobalColors.white);
54
54
 
55
55
  exports.Footer = Footer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.6.45",
3
+ "version": "21.6.46",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/organisms/VariantGroupModal/index.js CHANGED
@@ -163,7 +163,7 @@ export const VariantGroupModal = ({
163
163
  placeholder="Busca un grupo por su código"
164
164
  onChange={(event) => setQuery(event.target.value)}
165
165
  />
166
- <button type="submit" className="secondary" disabled={loading}>
166
+ <button type="submit" disabled={loading}>
167
167
  {loading ? "Buscando…" : "Buscar"}
168
168
  </button>
169
169
  </SearchRow>
package/src/components/organisms/VariantGroupModal/styles.js CHANGED
@@ -18,8 +18,8 @@ export const Overlay = styled.div`
18
18
  export const Panel = styled.div`
19
19
  display: flex;
20
20
  flex-direction: column;
21
- width: min(520px, 94vw);
22
- max-height: 88vh;
21
+ width: min(560px, 92vw);
22
+ max-height: 86vh;
23
23
  border-radius: 10px;
24
24
  background-color: ${GlobalColors.white};
25
25
  font-family: ${FontFamily.Raleway};
@@ -27,17 +27,17 @@ export const Panel = styled.div`
27
27
  `;
28
28
 
29
29
  export const Header = styled.div`
30
- padding: 18px 22px 12px;
30
+ padding: 20px 24px 12px;
31
31
 
32
32
  h2 {
33
33
  margin: 0;
34
- font-family: ${FontFamily.Raleway_600};
35
- font-size: 16px;
34
+ font-family: ${FontFamily.Raleway_700};
35
+ font-size: 17px;
36
36
  color: ${GlobalColors.deep_gray};
37
37
  }
38
38
 
39
39
  p {
40
- margin: 6px 0 0;
40
+ margin: 4px 0 0;
41
41
  font-size: 13px;
42
42
  line-height: 1.4;
43
43
  color: ${GlobalColors.gray};
@@ -48,7 +48,7 @@ export const Body = styled.div`
48
48
  flex: 1;
49
49
  min-height: 0;
50
50
  overflow-y: auto;
51
- padding: 4px 22px 8px;
51
+ padding: 4px 24px 12px;
52
52
  `;
53
53
 
54
54
  export const SearchRow = styled.form`
@@ -59,11 +59,11 @@ export const SearchRow = styled.form`
59
59
  input {
60
60
  flex: 1;
61
61
  min-width: 0;
62
- height: 38px;
62
+ height: 36px;
63
63
  padding: 0 12px;
64
64
  border: 1px solid ${GlobalColors.s2};
65
65
  border-radius: 6px;
66
- font-family: inherit;
66
+ font-family: ${FontFamily.Raleway};
67
67
  font-size: 13px;
68
68
  color: ${GlobalColors.deep_gray};
69
69
  }
@@ -72,6 +72,32 @@ export const SearchRow = styled.form`
72
72
  outline: none;
73
73
  border-color: ${PINK};
74
74
  }
75
+
76
+ /*
77
+ Estas reglas faltaban y el botón se salía del panel.
78
+
79
+ Llevaba className="secondary", pero esa clase solo está definida dentro de
80
+ Footer, así que aquí no aplicaba nada: salía como un botón crudo del
81
+ navegador, sin altura ni ancho acotados. El flex-shrink es para que el texto
82
+ no se parta cuando el campo de búsqueda se lleva el espacio.
83
+ */
84
+ button {
85
+ flex-shrink: 0;
86
+ height: 36px;
87
+ padding: 0 18px;
88
+ border: none;
89
+ border-radius: 6px;
90
+ background-color: ${PINK};
91
+ color: ${GlobalColors.white};
92
+ font-family: ${FontFamily.Raleway_600};
93
+ font-size: 13px;
94
+ cursor: pointer;
95
+ }
96
+
97
+ button:disabled {
98
+ opacity: 0.5;
99
+ cursor: default;
100
+ }
75
101
  `;
76
102
 
77
103
  export const List = styled.ul`
@@ -143,7 +169,7 @@ export const NewGroup = styled.div`
143
169
 
144
170
  input {
145
171
  width: 100%;
146
- height: 38px;
172
+ height: 36px;
147
173
  padding: 0 12px;
148
174
  border: 1px solid ${GlobalColors.s2};
149
175
  border-radius: 6px;
@@ -187,7 +213,7 @@ export const Footer = styled.div`
187
213
  align-items: center;
188
214
  justify-content: space-between;
189
215
  gap: 12px;
190
- padding: 14px 22px 18px;
216
+ padding: 16px 24px;
191
217
  border-top: 1px solid ${GlobalColors.s2};
192
218
 
193
219
  .resumen {