@gravity-ui/page-constructor 1.2.1 → 1.2.3

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 CHANGED
@@ -1,5 +1,19 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.2.3](https://github.com/gravity-ui/page-constructor/compare/v1.2.2...v1.2.3) (2022-10-14)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * content links margin ([6977b96](https://github.com/gravity-ui/page-constructor/commit/6977b9601e3936ba5293eadeeaeccd640814125f))
9
+
10
+ ## [1.2.2](https://github.com/gravity-ui/page-constructor/compare/v1.2.1...v1.2.2) (2022-10-14)
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * change p margin for size s ([#29](https://github.com/gravity-ui/page-constructor/issues/29)) ([dcb1c2a](https://github.com/gravity-ui/page-constructor/commit/dcb1c2acba20659a8f536f4bd7401dc54b4d7b71))
16
+
3
17
  ## [1.2.1](https://github.com/gravity-ui/page-constructor/compare/v1.2.0...v1.2.1) (2022-10-14)
4
18
 
5
19
 
@@ -51,13 +51,21 @@ unpredictable css rules order in build */
51
51
  .yfm_constructor.yfm_constructor_notice p {
52
52
  color: var(--yc-color-text-secondary);
53
53
  }
54
- .yfm_constructor.yfm_constructor p,
55
- .yfm_constructor.yfm_constructor li {
54
+ .yfm_constructor.yfm_constructor ul,
55
+ .yfm_constructor.yfm_constructor ol,
56
+ .yfm_constructor.yfm_constructor li,
57
+ .yfm_constructor.yfm_constructor p {
56
58
  margin: 0 0 12px;
57
59
  }
58
60
  .yfm_constructor.yfm_constructor p strong {
59
61
  font-weight: 500;
60
62
  }
63
+ .yfm_constructor.yfm_constructor_size_s ul,
64
+ .yfm_constructor.yfm_constructor_size_s ol,
65
+ .yfm_constructor.yfm_constructor_size_s li,
66
+ .yfm_constructor.yfm_constructor_size_s p {
67
+ margin-bottom: 8px;
68
+ }
61
69
 
62
70
  .yfm_constructor_theme_dark p {
63
71
  color: var(--yc-color-text-light-primary);
@@ -109,13 +117,17 @@ unpredictable css rules order in build */
109
117
  background-color: var(--yc-color-base-generic);
110
118
  }
111
119
 
120
+ .yfm_constructor_table {
121
+ /* stylelint-enable declaration-no-important */
122
+ }
112
123
  .yfm_constructor_table table {
113
124
  border: 0;
114
125
  table-layout: fixed;
115
126
  }
116
127
  .yfm_constructor_table thead,
117
128
  .yfm_constructor_table tr {
118
- background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
129
+ /* stylelint-disable declaration-no-important */
130
+ background-color: transparent !important;
119
131
  }
120
132
  .yfm_constructor_table tbody tr {
121
133
  border-top: 1px solid var(--yc-color-line-generic);
@@ -125,7 +137,7 @@ unpredictable css rules order in build */
125
137
  min-width: 120px;
126
138
  width: 120px;
127
139
  box-sizing: content-box;
128
- white-space: inherit !important; /* stylelint-disable-line declaration-no-important */
140
+ white-space: inherit !important;
129
141
  }
130
142
  .yfm_constructor_table td:first-child,
131
143
  .yfm_constructor_table th:first-child {
@@ -133,7 +145,7 @@ unpredictable css rules order in build */
133
145
  width: 172px;
134
146
  }
135
147
  .yfm_constructor_table th {
136
- text-align: left !important; /* stylelint-disable-line declaration-no-important */
148
+ text-align: left !important;
137
149
  }
138
150
 
139
151
  .pc-page-constructor {
@@ -1,6 +1,5 @@
1
1
  .pc-content_size_l .pc-content__text .yfm,
2
- .pc-content_size_l .pc-content__notice .yfm,
3
- .pc-content_size_l .pc-content__notice .yfm > * {
2
+ .pc-content_size_l .pc-content__notice .yfm {
4
3
  margin: 0;
5
4
  }
6
5
 
@@ -22,15 +21,16 @@ unpredictable css rules order in build */
22
21
  .pc-content__notice.pc-content__notice .yfm a:hover {
23
22
  color: var(--yc-color-text-primary);
24
23
  }
25
- .pc-content__notice.pc-content__notice ol,
26
- .pc-content__notice.pc-content__notice ul {
27
- padding-left: 25px;
28
- }
29
24
 
30
25
  .pc-content__button {
31
26
  margin-top: 0;
32
27
  margin-right: 12px;
33
28
  }
29
+ .pc-content__links {
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: baseline;
33
+ }
34
34
  .pc-content__link {
35
35
  display: block;
36
36
  margin-right: 32px;
@@ -40,9 +40,18 @@ unpredictable css rules order in build */
40
40
  text-align: center;
41
41
  }
42
42
 
43
+ .pc-content_centered .pc-content__links {
44
+ align-items: center;
45
+ }
43
46
  .pc-content_centered .pc-content__link a {
44
47
  justify-content: center;
45
48
  }
49
+ .pc-content_centered .pc-content__notice .yfm ul,
50
+ .pc-content_centered .pc-content__notice .yfm ol,
51
+ .pc-content_centered .pc-content__text .yfm ul,
52
+ .pc-content_centered .pc-content__text .yfm ol {
53
+ text-align: left;
54
+ }
46
55
  .pc-content_size_s .pc-content__text,
47
56
  .pc-content_size_s .pc-content__notice {
48
57
  margin-top: 8px;
@@ -64,8 +73,7 @@ unpredictable css rules order in build */
64
73
  margin-top: 0;
65
74
  }
66
75
  .pc-content_size_l .pc-content__text .yfm,
67
- .pc-content_size_l .pc-content__notice .yfm,
68
- .pc-content_size_l .pc-content__notice .yfm > * {
76
+ .pc-content_size_l .pc-content__notice .yfm {
69
77
  font-size: var(--yc-text-body-3-font-size);
70
78
  line-height: var(--yc-text-body-3-line-height);
71
79
  }
@@ -43,9 +43,13 @@ const Content = (props) => {
43
43
  return (react_1.default.createElement(grid_1.Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes },
44
44
  title && react_1.default.createElement(components_1.Title, Object.assign({ className: b('title') }, titleProps, { resetMargin: true })),
45
45
  text && (react_1.default.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
46
- react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true } }))),
46
+ react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
47
47
  additionalInfo && (react_1.default.createElement("div", { className: b('notice') },
48
- react_1.default.createElement(components_1.YFMWrapper, { content: additionalInfo, modifiers: { constructor: true, 'constructor-notice': true } }))),
48
+ react_1.default.createElement(components_1.YFMWrapper, { content: additionalInfo, modifiers: {
49
+ constructor: true,
50
+ 'constructor-notice': true,
51
+ [`constructor-size-${size}`]: true,
52
+ } }))),
49
53
  links && (react_1.default.createElement("div", { className: b('links') }, links.map((link) => (react_1.default.createElement(Link_1.default, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url })))))),
50
54
  buttons && (react_1.default.createElement("div", { className: b('buttons') }, buttons.map((item) => (react_1.default.createElement(components_1.Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size) }))))))));
51
55
  };
@@ -51,13 +51,21 @@ unpredictable css rules order in build */
51
51
  .yfm_constructor.yfm_constructor_notice p {
52
52
  color: var(--yc-color-text-secondary);
53
53
  }
54
- .yfm_constructor.yfm_constructor p,
55
- .yfm_constructor.yfm_constructor li {
54
+ .yfm_constructor.yfm_constructor ul,
55
+ .yfm_constructor.yfm_constructor ol,
56
+ .yfm_constructor.yfm_constructor li,
57
+ .yfm_constructor.yfm_constructor p {
56
58
  margin: 0 0 12px;
57
59
  }
58
60
  .yfm_constructor.yfm_constructor p strong {
59
61
  font-weight: 500;
60
62
  }
63
+ .yfm_constructor.yfm_constructor_size_s ul,
64
+ .yfm_constructor.yfm_constructor_size_s ol,
65
+ .yfm_constructor.yfm_constructor_size_s li,
66
+ .yfm_constructor.yfm_constructor_size_s p {
67
+ margin-bottom: 8px;
68
+ }
61
69
 
62
70
  .yfm_constructor_theme_dark p {
63
71
  color: var(--yc-color-text-light-primary);
@@ -109,13 +117,17 @@ unpredictable css rules order in build */
109
117
  background-color: var(--yc-color-base-generic);
110
118
  }
111
119
 
120
+ .yfm_constructor_table {
121
+ /* stylelint-enable declaration-no-important */
122
+ }
112
123
  .yfm_constructor_table table {
113
124
  border: 0;
114
125
  table-layout: fixed;
115
126
  }
116
127
  .yfm_constructor_table thead,
117
128
  .yfm_constructor_table tr {
118
- background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
129
+ /* stylelint-disable declaration-no-important */
130
+ background-color: transparent !important;
119
131
  }
120
132
  .yfm_constructor_table tbody tr {
121
133
  border-top: 1px solid var(--yc-color-line-generic);
@@ -125,7 +137,7 @@ unpredictable css rules order in build */
125
137
  min-width: 120px;
126
138
  width: 120px;
127
139
  box-sizing: content-box;
128
- white-space: inherit !important; /* stylelint-disable-line declaration-no-important */
140
+ white-space: inherit !important;
129
141
  }
130
142
  .yfm_constructor_table td:first-child,
131
143
  .yfm_constructor_table th:first-child {
@@ -133,7 +145,7 @@ unpredictable css rules order in build */
133
145
  width: 172px;
134
146
  }
135
147
  .yfm_constructor_table th {
136
- text-align: left !important; /* stylelint-disable-line declaration-no-important */
148
+ text-align: left !important;
137
149
  }
138
150
 
139
151
  .pc-page-constructor {
@@ -1,6 +1,5 @@
1
1
  .pc-content_size_l .pc-content__text .yfm,
2
- .pc-content_size_l .pc-content__notice .yfm,
3
- .pc-content_size_l .pc-content__notice .yfm > * {
2
+ .pc-content_size_l .pc-content__notice .yfm {
4
3
  margin: 0;
5
4
  }
6
5
 
@@ -22,15 +21,16 @@ unpredictable css rules order in build */
22
21
  .pc-content__notice.pc-content__notice .yfm a:hover {
23
22
  color: var(--yc-color-text-primary);
24
23
  }
25
- .pc-content__notice.pc-content__notice ol,
26
- .pc-content__notice.pc-content__notice ul {
27
- padding-left: 25px;
28
- }
29
24
 
30
25
  .pc-content__button {
31
26
  margin-top: 0;
32
27
  margin-right: 12px;
33
28
  }
29
+ .pc-content__links {
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: baseline;
33
+ }
34
34
  .pc-content__link {
35
35
  display: block;
36
36
  margin-right: 32px;
@@ -40,9 +40,18 @@ unpredictable css rules order in build */
40
40
  text-align: center;
41
41
  }
42
42
 
43
+ .pc-content_centered .pc-content__links {
44
+ align-items: center;
45
+ }
43
46
  .pc-content_centered .pc-content__link a {
44
47
  justify-content: center;
45
48
  }
49
+ .pc-content_centered .pc-content__notice .yfm ul,
50
+ .pc-content_centered .pc-content__notice .yfm ol,
51
+ .pc-content_centered .pc-content__text .yfm ul,
52
+ .pc-content_centered .pc-content__text .yfm ol {
53
+ text-align: left;
54
+ }
46
55
  .pc-content_size_s .pc-content__text,
47
56
  .pc-content_size_s .pc-content__notice {
48
57
  margin-top: 8px;
@@ -64,8 +73,7 @@ unpredictable css rules order in build */
64
73
  margin-top: 0;
65
74
  }
66
75
  .pc-content_size_l .pc-content__text .yfm,
67
- .pc-content_size_l .pc-content__notice .yfm,
68
- .pc-content_size_l .pc-content__notice .yfm > * {
76
+ .pc-content_size_l .pc-content__notice .yfm {
69
77
  font-size: var(--yc-text-body-3-font-size);
70
78
  line-height: var(--yc-text-body-3-line-height);
71
79
  }
@@ -42,9 +42,13 @@ const Content = (props) => {
42
42
  return (React.createElement(Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes },
43
43
  title && React.createElement(Title, Object.assign({ className: b('title') }, titleProps, { resetMargin: true })),
44
44
  text && (React.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
45
- React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true } }))),
45
+ React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
46
46
  additionalInfo && (React.createElement("div", { className: b('notice') },
47
- React.createElement(YFMWrapper, { content: additionalInfo, modifiers: { constructor: true, 'constructor-notice': true } }))),
47
+ React.createElement(YFMWrapper, { content: additionalInfo, modifiers: {
48
+ constructor: true,
49
+ 'constructor-notice': true,
50
+ [`constructor-size-${size}`]: true,
51
+ } }))),
48
52
  links && (React.createElement("div", { className: b('links') }, links.map((link) => (React.createElement(LinkBlock, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url })))))),
49
53
  buttons && (React.createElement("div", { className: b('buttons') }, buttons.map((item) => (React.createElement(Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size) }))))))));
50
54
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "1.2.1",
3
+ "version": "1.2.3",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
package/styles/styles.css CHANGED
@@ -226,13 +226,21 @@ unpredictable css rules order in build */
226
226
  .yfm_constructor.yfm_constructor_notice p {
227
227
  color: var(--yc-color-text-secondary);
228
228
  }
229
- .yfm_constructor.yfm_constructor p,
230
- .yfm_constructor.yfm_constructor li {
229
+ .yfm_constructor.yfm_constructor ul,
230
+ .yfm_constructor.yfm_constructor ol,
231
+ .yfm_constructor.yfm_constructor li,
232
+ .yfm_constructor.yfm_constructor p {
231
233
  margin: 0 0 12px;
232
234
  }
233
235
  .yfm_constructor.yfm_constructor p strong {
234
236
  font-weight: 500;
235
237
  }
238
+ .yfm_constructor.yfm_constructor_size_s ul,
239
+ .yfm_constructor.yfm_constructor_size_s ol,
240
+ .yfm_constructor.yfm_constructor_size_s li,
241
+ .yfm_constructor.yfm_constructor_size_s p {
242
+ margin-bottom: 8px;
243
+ }
236
244
 
237
245
  .yfm_constructor_theme_dark p {
238
246
  color: var(--yc-color-text-light-primary);
@@ -284,13 +292,17 @@ unpredictable css rules order in build */
284
292
  background-color: var(--yc-color-base-generic);
285
293
  }
286
294
 
295
+ .yfm_constructor_table {
296
+ /* stylelint-enable declaration-no-important */
297
+ }
287
298
  .yfm_constructor_table table {
288
299
  border: 0;
289
300
  table-layout: fixed;
290
301
  }
291
302
  .yfm_constructor_table thead,
292
303
  .yfm_constructor_table tr {
293
- background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
304
+ /* stylelint-disable declaration-no-important */
305
+ background-color: transparent !important;
294
306
  }
295
307
  .yfm_constructor_table tbody tr {
296
308
  border-top: 1px solid var(--yc-color-line-generic);
@@ -300,7 +312,7 @@ unpredictable css rules order in build */
300
312
  min-width: 120px;
301
313
  width: 120px;
302
314
  box-sizing: content-box;
303
- white-space: inherit !important; /* stylelint-disable-line declaration-no-important */
315
+ white-space: inherit !important;
304
316
  }
305
317
  .yfm_constructor_table td:first-child,
306
318
  .yfm_constructor_table th:first-child {
@@ -308,5 +320,5 @@ unpredictable css rules order in build */
308
320
  width: 172px;
309
321
  }
310
322
  .yfm_constructor_table th {
311
- text-align: left !important; /* stylelint-disable-line declaration-no-important */
323
+ text-align: left !important;
312
324
  }
package/styles/yfm.scss CHANGED
@@ -34,14 +34,25 @@
34
34
  }
35
35
  }
36
36
 
37
- p,
38
- li {
37
+ ul,
38
+ ol,
39
+ li,
40
+ p {
39
41
  margin: 0 0 $indentXXS;
40
42
  }
41
43
 
42
44
  p strong {
43
45
  font-weight: 500;
44
46
  }
47
+
48
+ &_size_s {
49
+ ul,
50
+ ol,
51
+ li,
52
+ p {
53
+ margin-bottom: $indentXXXS;
54
+ }
55
+ }
45
56
  }
46
57
 
47
58
  &_theme_dark {
@@ -106,7 +117,8 @@
106
117
 
107
118
  thead,
108
119
  tr {
109
- background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
120
+ /* stylelint-disable declaration-no-important */
121
+ background-color: transparent !important;
110
122
  }
111
123
 
112
124
  tbody tr {
@@ -118,7 +130,7 @@
118
130
  min-width: $columnWidth;
119
131
  width: $columnWidth;
120
132
  box-sizing: content-box;
121
- white-space: inherit !important; /* stylelint-disable-line declaration-no-important */
133
+ white-space: inherit !important;
122
134
 
123
135
  &:first-child {
124
136
  min-width: $firstColumnWidth;
@@ -127,6 +139,7 @@
127
139
  }
128
140
 
129
141
  th {
130
- text-align: left !important; /* stylelint-disable-line declaration-no-important */
142
+ text-align: left !important;
131
143
  }
144
+ /* stylelint-enable declaration-no-important */
132
145
  }