@gravity-ui/blog-constructor 5.5.0 → 5.7.0

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 (24) hide show
  1. package/build/cjs/blocks/Author/Author.css +1 -0
  2. package/build/cjs/blocks/CTA/CTA.css +1 -0
  3. package/build/cjs/blocks/Header/schema.d.ts +49 -2
  4. package/build/cjs/blocks/Media/schema.d.ts +24 -1
  5. package/build/cjs/components/FeedHeader/components/Controls/customRenders.js +1 -1
  6. package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +11 -0
  7. package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.d.ts +1 -1
  8. package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.js +2 -2
  9. package/build/cjs/containers/BlogPostPage/BlogPostPage.css +18 -1
  10. package/build/cjs/schema/index.d.ts +73 -3
  11. package/build/esm/blocks/Author/Author.css +1 -0
  12. package/build/esm/blocks/CTA/CTA.css +1 -0
  13. package/build/esm/blocks/Header/schema.d.ts +49 -2
  14. package/build/esm/blocks/Media/schema.d.ts +24 -1
  15. package/build/esm/components/FeedHeader/components/Controls/customRenders.js +1 -1
  16. package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css +11 -0
  17. package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.d.ts +1 -1
  18. package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.js +2 -2
  19. package/build/esm/containers/BlogPostPage/BlogPostPage.css +18 -1
  20. package/build/esm/schema/index.d.ts +73 -3
  21. package/package.json +17 -14
  22. package/styles/fonts.scss +28 -14
  23. package/styles/yfm.css +10 -0
  24. package/styles/yfm.scss +7 -0
package/build/cjs/blocks/Author/Author.css CHANGED
@@ -23,6 +23,7 @@ unpredictable css rules order in build */
23
23
  display: flex;
24
24
  flex-wrap: wrap;
25
25
  justify-content: flex-start;
26
+ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
26
27
  align-content: flex-start;
27
28
  position: relative;
28
29
  }
package/build/cjs/blocks/CTA/CTA.css CHANGED
@@ -4,6 +4,7 @@
4
4
  border-radius: var(--bc-border-radius);
5
5
  min-height: 80px;
6
6
  align-content: center;
7
+ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
7
8
  justify-content: center;
8
9
  flex-direction: column;
9
10
  flex-grow: 1;
package/build/cjs/blocks/Header/schema.d.ts CHANGED
@@ -123,7 +123,27 @@ export declare const Header: {
123
123
  };
124
124
  controls: {
125
125
  type: string;
126
- enum: string[];
126
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
127
+ };
128
+ customControlsOptions: {
129
+ type: string;
130
+ additionalProperties: boolean;
131
+ properties: {
132
+ type: {
133
+ type: string;
134
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
135
+ };
136
+ muteButtonShown: {
137
+ type: string;
138
+ };
139
+ positioning: {
140
+ type: string;
141
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
142
+ };
143
+ };
144
+ };
145
+ ariaLabel: {
146
+ type: string;
127
147
  };
128
148
  };
129
149
  } & {
@@ -136,6 +156,10 @@ export declare const Header: {
136
156
  optionName: string;
137
157
  })[];
138
158
  };
159
+ mediaView: {
160
+ type: string;
161
+ enum: string[];
162
+ };
139
163
  backLink: {
140
164
  type: string;
141
165
  required: string[];
@@ -271,7 +295,27 @@ export declare const Header: {
271
295
  };
272
296
  controls: {
273
297
  type: string;
274
- enum: string[];
298
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
299
+ };
300
+ customControlsOptions: {
301
+ type: string;
302
+ additionalProperties: boolean;
303
+ properties: {
304
+ type: {
305
+ type: string;
306
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
307
+ };
308
+ muteButtonShown: {
309
+ type: string;
310
+ };
311
+ positioning: {
312
+ type: string;
313
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
314
+ };
315
+ };
316
+ };
317
+ ariaLabel: {
318
+ type: string;
275
319
  };
276
320
  };
277
321
  };
@@ -388,6 +432,9 @@ export declare const Header: {
388
432
  };
389
433
  })[];
390
434
  };
435
+ ratio: {
436
+ type: string;
437
+ };
391
438
  };
392
439
  } & {
393
440
  optionName: string;
package/build/cjs/blocks/Media/schema.d.ts CHANGED
@@ -109,7 +109,27 @@ export declare const Media: {
109
109
  };
110
110
  controls: {
111
111
  type: string;
112
- enum: string[];
112
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
113
+ };
114
+ customControlsOptions: {
115
+ type: string;
116
+ additionalProperties: boolean;
117
+ properties: {
118
+ type: {
119
+ type: string;
120
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
121
+ };
122
+ muteButtonShown: {
123
+ type: string;
124
+ };
125
+ positioning: {
126
+ type: string;
127
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
128
+ };
129
+ };
130
+ };
131
+ ariaLabel: {
132
+ type: string;
113
133
  };
114
134
  };
115
135
  };
@@ -226,6 +246,9 @@ export declare const Media: {
226
246
  };
227
247
  })[];
228
248
  };
249
+ ratio: {
250
+ type: string;
251
+ };
229
252
  paddingTop: {
230
253
  type: string;
231
254
  enum: string[];
package/build/cjs/components/FeedHeader/components/Controls/customRenders.js CHANGED
@@ -11,7 +11,7 @@ const CustomSwitcher_1 = require("../CustomSwitcher/CustomSwitcher");
11
11
  const b = (0, cn_1.block)('feed-controls');
12
12
  const renderSwitcher = ({ initial, list, defaultLabel }) =>
13
13
  // eslint-disable-next-line react/display-name
14
- ({ onClick, ref }) => (react_1.default.createElement(CustomSwitcher_1.CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick }));
14
+ ({ onClick, ref, onKeyDown, open }) => (react_1.default.createElement(CustomSwitcher_1.CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick, onKeyDown: onKeyDown, open: open }));
15
15
  exports.renderSwitcher = renderSwitcher;
16
16
  const renderFilter = ({ value, ref, onChange, onKeyDown }) => (react_1.default.createElement(uikit_1.TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, view: "clear", placeholder: (0, i18n_1.i18)(i18n_1.Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
17
17
  exports.renderFilter = renderFilter;
package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css CHANGED
@@ -12,6 +12,17 @@ unpredictable css rules order in build */
12
12
  border-radius: var(--g-border-radius-xl);
13
13
  width: 100%;
14
14
  line-height: 42px;
15
+ text-align: initial;
16
+ font-family: inherit;
17
+ padding: 0;
18
+ margin: 0;
19
+ }
20
+ .bc-feed-custom-switcher__custom-switcher:focus {
21
+ outline: 2px solid var(--g-color-line-focus);
22
+ outline-offset: 0;
23
+ }
24
+ .bc-feed-custom-switcher__custom-switcher:focus:not(:focus-visible) {
25
+ outline: 0;
15
26
  }
16
27
  .bc-feed-custom-switcher__custom-switcher + .yc-popup.yc-popup_open {
17
28
  position: absolute !important;
package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.d.ts CHANGED
@@ -8,5 +8,5 @@ export type CustomSwitcherProps = {
8
8
  list: SelectItem[];
9
9
  controlRef: RenderControlParameters['ref'];
10
10
  } & Omit<RenderControlParameters, 'ref'>;
11
- export declare const CustomSwitcher: ({ initial, defaultLabel, list, onClick, controlRef, }: CustomSwitcherProps) => React.JSX.Element;
11
+ export declare const CustomSwitcher: ({ initial, defaultLabel, list, onClick, controlRef, onKeyDown, open, }: CustomSwitcherProps) => React.JSX.Element;
12
12
  export {};
package/build/cjs/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.js CHANGED
@@ -8,7 +8,7 @@ const DropdownArrow_1 = require("../../../../icons/DropdownArrow");
8
8
  const cn_1 = require("../../../../utils/cn");
9
9
  const b = (0, cn_1.block)('feed-custom-switcher');
10
10
  const ICON_SIZE = 12;
11
- const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, }) => {
11
+ const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, onKeyDown, open, }) => {
12
12
  const itemsNames = (0, react_1.useMemo)(() => {
13
13
  const items = list
14
14
  .filter((item) => initial.includes(item.value))
@@ -16,7 +16,7 @@ const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, }) =
16
16
  return items.length ? items : [defaultLabel];
17
17
  }, [defaultLabel, initial, list]);
18
18
  const hasCounter = itemsNames.length > 1;
19
- return (react_1.default.createElement("div", { className: b('custom-switcher'), onClick: onClick, ref: controlRef },
19
+ return (react_1.default.createElement("button", { className: b('custom-switcher'), onClick: onClick, ref: controlRef, onKeyDown: onKeyDown, "aria-expanded": open },
20
20
  react_1.default.createElement("div", { className: b('custom-switcher-element', { content: true }) }, itemsNames === null || itemsNames === void 0 ? void 0 : itemsNames.join(', ')),
21
21
  hasCounter && (react_1.default.createElement("div", { className: b('custom-switcher-element', { counter: true }) }, itemsNames.length)),
22
22
  react_1.default.createElement("div", { className: b('custom-switcher-element', { arrow: true }) },
package/build/cjs/containers/BlogPostPage/BlogPostPage.css CHANGED
@@ -109,10 +109,20 @@ unpredictable css rules order in build */
109
109
  }
110
110
  .yfm_blog a {
111
111
  color: var(--g-color-text-link);
112
+ border-radius: var(--g-focus-border-radius);
112
113
  }
113
114
  .yfm_blog a:hover {
114
115
  color: var(--g-color-text-link-hover);
115
116
  }
117
+ .yfm_blog a:focus {
118
+ box-shadow: 0 0 0 2px var(--g-color-line-focus);
119
+ }
120
+ .yfm_blog a:focus:not(:focus-visible) {
121
+ box-shadow: none;
122
+ }
123
+ .yfm_blog a:focus {
124
+ outline: 0;
125
+ }
116
126
  .yfm_blog .yfm-tab:hover, .yfm_blog .yfm-tab:active {
117
127
  color: var(--g-color-text-link-hover);
118
128
  }
@@ -165,7 +175,7 @@ unpredictable css rules order in build */
165
175
  margin: 0 0 12px;
166
176
  }
167
177
  .yfm_constructor.yfm_constructor p strong {
168
- font-weight: 500;
178
+ font-weight: var(--g-text-accent-font-weight);
169
179
  }
170
180
  .yfm_constructor.yfm_constructor_size_s ul,
171
181
  .yfm_constructor.yfm_constructor_size_s ol,
@@ -194,6 +204,7 @@ unpredictable css rules order in build */
194
204
  color: var(--g-color-text-link);
195
205
  text-decoration: none;
196
206
  cursor: pointer;
207
+ border-radius: var(--g-focus-border-radius);
197
208
  }
198
209
  .utilityfocus .yfm_constructor a:focus {
199
210
  outline: 2px solid #ffdb4d;
@@ -202,6 +213,12 @@ unpredictable css rules order in build */
202
213
  --pc-text-header-color: var(--g-color-text-link-hover);
203
214
  color: var(--g-color-text-link-hover);
204
215
  }
216
+ .yfm_constructor a:focus {
217
+ box-shadow: 0 0 0 2px var(--g-color-line-focus);
218
+ }
219
+ .yfm_constructor a:focus:not(:focus-visible) {
220
+ box-shadow: none;
221
+ }
205
222
  .yfm_constructor table {
206
223
  color: var(--g-color-text-primary);
207
224
  border: 1px solid var(--g-color-line-generic);
package/build/cjs/schema/index.d.ts CHANGED
@@ -131,7 +131,27 @@ export declare const schemasForCustom: {
131
131
  };
132
132
  controls: {
133
133
  type: string;
134
- enum: string[];
134
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
135
+ };
136
+ customControlsOptions: {
137
+ type: string;
138
+ additionalProperties: boolean;
139
+ properties: {
140
+ type: {
141
+ type: string;
142
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
143
+ };
144
+ muteButtonShown: {
145
+ type: string;
146
+ };
147
+ positioning: {
148
+ type: string;
149
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
150
+ };
151
+ };
152
+ };
153
+ ariaLabel: {
154
+ type: string;
135
155
  };
136
156
  };
137
157
  } & {
@@ -144,6 +164,10 @@ export declare const schemasForCustom: {
144
164
  optionName: string;
145
165
  })[];
146
166
  };
167
+ mediaView: {
168
+ type: string;
169
+ enum: string[];
170
+ };
147
171
  backLink: {
148
172
  type: string;
149
173
  required: string[];
@@ -279,7 +303,27 @@ export declare const schemasForCustom: {
279
303
  };
280
304
  controls: {
281
305
  type: string;
282
- enum: string[];
306
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
307
+ };
308
+ customControlsOptions: {
309
+ type: string;
310
+ additionalProperties: boolean;
311
+ properties: {
312
+ type: {
313
+ type: string;
314
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
315
+ };
316
+ muteButtonShown: {
317
+ type: string;
318
+ };
319
+ positioning: {
320
+ type: string;
321
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
322
+ };
323
+ };
324
+ };
325
+ ariaLabel: {
326
+ type: string;
283
327
  };
284
328
  };
285
329
  };
@@ -396,6 +440,9 @@ export declare const schemasForCustom: {
396
440
  };
397
441
  })[];
398
442
  };
443
+ ratio: {
444
+ type: string;
445
+ };
399
446
  };
400
447
  } & {
401
448
  optionName: string;
@@ -1226,7 +1273,27 @@ export declare const schemasForCustom: {
1226
1273
  };
1227
1274
  controls: {
1228
1275
  type: string;
1229
- enum: string[];
1276
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
1277
+ };
1278
+ customControlsOptions: {
1279
+ type: string;
1280
+ additionalProperties: boolean;
1281
+ properties: {
1282
+ type: {
1283
+ type: string;
1284
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
1285
+ };
1286
+ muteButtonShown: {
1287
+ type: string;
1288
+ };
1289
+ positioning: {
1290
+ type: string;
1291
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
1292
+ };
1293
+ };
1294
+ };
1295
+ ariaLabel: {
1296
+ type: string;
1230
1297
  };
1231
1298
  };
1232
1299
  };
@@ -1343,6 +1410,9 @@ export declare const schemasForCustom: {
1343
1410
  };
1344
1411
  })[];
1345
1412
  };
1413
+ ratio: {
1414
+ type: string;
1415
+ };
1346
1416
  paddingTop: {
1347
1417
  type: string;
1348
1418
  enum: string[];
package/build/esm/blocks/Author/Author.css CHANGED
@@ -23,6 +23,7 @@ unpredictable css rules order in build */
23
23
  display: flex;
24
24
  flex-wrap: wrap;
25
25
  justify-content: flex-start;
26
+ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
26
27
  align-content: flex-start;
27
28
  position: relative;
28
29
  }
package/build/esm/blocks/CTA/CTA.css CHANGED
@@ -4,6 +4,7 @@
4
4
  border-radius: var(--bc-border-radius);
5
5
  min-height: 80px;
6
6
  align-content: center;
7
+ /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
7
8
  justify-content: center;
8
9
  flex-direction: column;
9
10
  flex-grow: 1;
package/build/esm/blocks/Header/schema.d.ts CHANGED
@@ -123,7 +123,27 @@ export declare const Header: {
123
123
  };
124
124
  controls: {
125
125
  type: string;
126
- enum: string[];
126
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
127
+ };
128
+ customControlsOptions: {
129
+ type: string;
130
+ additionalProperties: boolean;
131
+ properties: {
132
+ type: {
133
+ type: string;
134
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
135
+ };
136
+ muteButtonShown: {
137
+ type: string;
138
+ };
139
+ positioning: {
140
+ type: string;
141
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
142
+ };
143
+ };
144
+ };
145
+ ariaLabel: {
146
+ type: string;
127
147
  };
128
148
  };
129
149
  } & {
@@ -136,6 +156,10 @@ export declare const Header: {
136
156
  optionName: string;
137
157
  })[];
138
158
  };
159
+ mediaView: {
160
+ type: string;
161
+ enum: string[];
162
+ };
139
163
  backLink: {
140
164
  type: string;
141
165
  required: string[];
@@ -271,7 +295,27 @@ export declare const Header: {
271
295
  };
272
296
  controls: {
273
297
  type: string;
274
- enum: string[];
298
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
299
+ };
300
+ customControlsOptions: {
301
+ type: string;
302
+ additionalProperties: boolean;
303
+ properties: {
304
+ type: {
305
+ type: string;
306
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
307
+ };
308
+ muteButtonShown: {
309
+ type: string;
310
+ };
311
+ positioning: {
312
+ type: string;
313
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
314
+ };
315
+ };
316
+ };
317
+ ariaLabel: {
318
+ type: string;
275
319
  };
276
320
  };
277
321
  };
@@ -388,6 +432,9 @@ export declare const Header: {
388
432
  };
389
433
  })[];
390
434
  };
435
+ ratio: {
436
+ type: string;
437
+ };
391
438
  };
392
439
  } & {
393
440
  optionName: string;
package/build/esm/blocks/Media/schema.d.ts CHANGED
@@ -109,7 +109,27 @@ export declare const Media: {
109
109
  };
110
110
  controls: {
111
111
  type: string;
112
- enum: string[];
112
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
113
+ };
114
+ customControlsOptions: {
115
+ type: string;
116
+ additionalProperties: boolean;
117
+ properties: {
118
+ type: {
119
+ type: string;
120
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
121
+ };
122
+ muteButtonShown: {
123
+ type: string;
124
+ };
125
+ positioning: {
126
+ type: string;
127
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
128
+ };
129
+ };
130
+ };
131
+ ariaLabel: {
132
+ type: string;
113
133
  };
114
134
  };
115
135
  };
@@ -226,6 +246,9 @@ export declare const Media: {
226
246
  };
227
247
  })[];
228
248
  };
249
+ ratio: {
250
+ type: string;
251
+ };
229
252
  paddingTop: {
230
253
  type: string;
231
254
  enum: string[];
package/build/esm/components/FeedHeader/components/Controls/customRenders.js CHANGED
@@ -8,6 +8,6 @@ import './Controls.css';
8
8
  const b = block('feed-controls');
9
9
  export const renderSwitcher = ({ initial, list, defaultLabel }) =>
10
10
  // eslint-disable-next-line react/display-name
11
- ({ onClick, ref }) => (React.createElement(CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick }));
11
+ ({ onClick, ref, onKeyDown, open }) => (React.createElement(CustomSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick, onKeyDown: onKeyDown, open: open }));
12
12
  export const renderFilter = ({ value, ref, onChange, onKeyDown }) => (React.createElement(TextInput, { controlRef: ref, controlProps: { size: 1 }, value: value, view: "clear", placeholder: i18(Keyset.Search), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
13
13
  export const renderOption = (option) => (React.createElement(CustomSelectOption, { data: option }));
package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.css CHANGED
@@ -12,6 +12,17 @@ unpredictable css rules order in build */
12
12
  border-radius: var(--g-border-radius-xl);
13
13
  width: 100%;
14
14
  line-height: 42px;
15
+ text-align: initial;
16
+ font-family: inherit;
17
+ padding: 0;
18
+ margin: 0;
19
+ }
20
+ .bc-feed-custom-switcher__custom-switcher:focus {
21
+ outline: 2px solid var(--g-color-line-focus);
22
+ outline-offset: 0;
23
+ }
24
+ .bc-feed-custom-switcher__custom-switcher:focus:not(:focus-visible) {
25
+ outline: 0;
15
26
  }
16
27
  .bc-feed-custom-switcher__custom-switcher + .yc-popup.yc-popup_open {
17
28
  position: absolute !important;
package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.d.ts CHANGED
@@ -9,5 +9,5 @@ export type CustomSwitcherProps = {
9
9
  list: SelectItem[];
10
10
  controlRef: RenderControlParameters['ref'];
11
11
  } & Omit<RenderControlParameters, 'ref'>;
12
- export declare const CustomSwitcher: ({ initial, defaultLabel, list, onClick, controlRef, }: CustomSwitcherProps) => React.JSX.Element;
12
+ export declare const CustomSwitcher: ({ initial, defaultLabel, list, onClick, controlRef, onKeyDown, open, }: CustomSwitcherProps) => React.JSX.Element;
13
13
  export {};
package/build/esm/components/FeedHeader/components/CustomSwitcher/CustomSwitcher.js CHANGED
@@ -5,7 +5,7 @@ import { block } from '../../../../utils/cn';
5
5
  import './CustomSwitcher.css';
6
6
  const b = block('feed-custom-switcher');
7
7
  const ICON_SIZE = 12;
8
- export const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, }) => {
8
+ export const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, onKeyDown, open, }) => {
9
9
  const itemsNames = useMemo(() => {
10
10
  const items = list
11
11
  .filter((item) => initial.includes(item.value))
@@ -13,7 +13,7 @@ export const CustomSwitcher = ({ initial, defaultLabel, list, onClick, controlRe
13
13
  return items.length ? items : [defaultLabel];
14
14
  }, [defaultLabel, initial, list]);
15
15
  const hasCounter = itemsNames.length > 1;
16
- return (React.createElement("div", { className: b('custom-switcher'), onClick: onClick, ref: controlRef },
16
+ return (React.createElement("button", { className: b('custom-switcher'), onClick: onClick, ref: controlRef, onKeyDown: onKeyDown, "aria-expanded": open },
17
17
  React.createElement("div", { className: b('custom-switcher-element', { content: true }) }, itemsNames === null || itemsNames === void 0 ? void 0 : itemsNames.join(', ')),
18
18
  hasCounter && (React.createElement("div", { className: b('custom-switcher-element', { counter: true }) }, itemsNames.length)),
19
19
  React.createElement("div", { className: b('custom-switcher-element', { arrow: true }) },
package/build/esm/containers/BlogPostPage/BlogPostPage.css CHANGED
@@ -109,10 +109,20 @@ unpredictable css rules order in build */
109
109
  }
110
110
  .yfm_blog a {
111
111
  color: var(--g-color-text-link);
112
+ border-radius: var(--g-focus-border-radius);
112
113
  }
113
114
  .yfm_blog a:hover {
114
115
  color: var(--g-color-text-link-hover);
115
116
  }
117
+ .yfm_blog a:focus {
118
+ box-shadow: 0 0 0 2px var(--g-color-line-focus);
119
+ }
120
+ .yfm_blog a:focus:not(:focus-visible) {
121
+ box-shadow: none;
122
+ }
123
+ .yfm_blog a:focus {
124
+ outline: 0;
125
+ }
116
126
  .yfm_blog .yfm-tab:hover, .yfm_blog .yfm-tab:active {
117
127
  color: var(--g-color-text-link-hover);
118
128
  }
@@ -165,7 +175,7 @@ unpredictable css rules order in build */
165
175
  margin: 0 0 12px;
166
176
  }
167
177
  .yfm_constructor.yfm_constructor p strong {
168
- font-weight: 500;
178
+ font-weight: var(--g-text-accent-font-weight);
169
179
  }
170
180
  .yfm_constructor.yfm_constructor_size_s ul,
171
181
  .yfm_constructor.yfm_constructor_size_s ol,
@@ -194,6 +204,7 @@ unpredictable css rules order in build */
194
204
  color: var(--g-color-text-link);
195
205
  text-decoration: none;
196
206
  cursor: pointer;
207
+ border-radius: var(--g-focus-border-radius);
197
208
  }
198
209
  .utilityfocus .yfm_constructor a:focus {
199
210
  outline: 2px solid #ffdb4d;
@@ -202,6 +213,12 @@ unpredictable css rules order in build */
202
213
  --pc-text-header-color: var(--g-color-text-link-hover);
203
214
  color: var(--g-color-text-link-hover);
204
215
  }
216
+ .yfm_constructor a:focus {
217
+ box-shadow: 0 0 0 2px var(--g-color-line-focus);
218
+ }
219
+ .yfm_constructor a:focus:not(:focus-visible) {
220
+ box-shadow: none;
221
+ }
205
222
  .yfm_constructor table {
206
223
  color: var(--g-color-text-primary);
207
224
  border: 1px solid var(--g-color-line-generic);
package/build/esm/schema/index.d.ts CHANGED
@@ -131,7 +131,27 @@ export declare const schemasForCustom: {
131
131
  };
132
132
  controls: {
133
133
  type: string;
134
- enum: string[];
134
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
135
+ };
136
+ customControlsOptions: {
137
+ type: string;
138
+ additionalProperties: boolean;
139
+ properties: {
140
+ type: {
141
+ type: string;
142
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
143
+ };
144
+ muteButtonShown: {
145
+ type: string;
146
+ };
147
+ positioning: {
148
+ type: string;
149
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
150
+ };
151
+ };
152
+ };
153
+ ariaLabel: {
154
+ type: string;
135
155
  };
136
156
  };
137
157
  } & {
@@ -144,6 +164,10 @@ export declare const schemasForCustom: {
144
164
  optionName: string;
145
165
  })[];
146
166
  };
167
+ mediaView: {
168
+ type: string;
169
+ enum: string[];
170
+ };
147
171
  backLink: {
148
172
  type: string;
149
173
  required: string[];
@@ -279,7 +303,27 @@ export declare const schemasForCustom: {
279
303
  };
280
304
  controls: {
281
305
  type: string;
282
- enum: string[];
306
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
307
+ };
308
+ customControlsOptions: {
309
+ type: string;
310
+ additionalProperties: boolean;
311
+ properties: {
312
+ type: {
313
+ type: string;
314
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
315
+ };
316
+ muteButtonShown: {
317
+ type: string;
318
+ };
319
+ positioning: {
320
+ type: string;
321
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
322
+ };
323
+ };
324
+ };
325
+ ariaLabel: {
326
+ type: string;
283
327
  };
284
328
  };
285
329
  };
@@ -396,6 +440,9 @@ export declare const schemasForCustom: {
396
440
  };
397
441
  })[];
398
442
  };
443
+ ratio: {
444
+ type: string;
445
+ };
399
446
  };
400
447
  } & {
401
448
  optionName: string;
@@ -1226,7 +1273,27 @@ export declare const schemasForCustom: {
1226
1273
  };
1227
1274
  controls: {
1228
1275
  type: string;
1229
- enum: string[];
1276
+ enum: import("@gravity-ui/page-constructor").MediaVideoControlsType[];
1277
+ };
1278
+ customControlsOptions: {
1279
+ type: string;
1280
+ additionalProperties: boolean;
1281
+ properties: {
1282
+ type: {
1283
+ type: string;
1284
+ enum: import("@gravity-ui/page-constructor").CustomControlsType[];
1285
+ };
1286
+ muteButtonShown: {
1287
+ type: string;
1288
+ };
1289
+ positioning: {
1290
+ type: string;
1291
+ enum: import("@gravity-ui/page-constructor").CustomControlsButtonPositioning[];
1292
+ };
1293
+ };
1294
+ };
1295
+ ariaLabel: {
1296
+ type: string;
1230
1297
  };
1231
1298
  };
1232
1299
  };
@@ -1343,6 +1410,9 @@ export declare const schemasForCustom: {
1343
1410
  };
1344
1411
  })[];
1345
1412
  };
1413
+ ratio: {
1414
+ type: string;
1415
+ };
1346
1416
  paddingTop: {
1347
1417
  type: string;
1348
1418
  enum: string[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/blog-constructor",
3
- "version": "5.5.0",
3
+ "version": "5.7.0",
4
4
  "description": "Gravity UI Blog Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -60,8 +60,8 @@
60
60
  },
61
61
  "dependencies": {
62
62
  "@bem-react/classname": "^1.6.0",
63
- "@gravity-ui/components": "^2.4.0",
64
- "@gravity-ui/i18n": "^1.0.0",
63
+ "@gravity-ui/components": "^2.5.1",
64
+ "@gravity-ui/i18n": "^1.1.0",
65
65
  "lodash": "^4.17.21",
66
66
  "react-helmet": "^6.1.0",
67
67
  "react-player": "^2.9.0",
@@ -74,12 +74,13 @@
74
74
  "typograf": "^6.14.0",
75
75
  "ua-parser-js": "^0.7.28",
76
76
  "url": "^0.11.0",
77
- "url-join": "^5.0.0"
77
+ "url-join": "^5.0.0",
78
+ "utility-types": "^3.10.0"
78
79
  },
79
80
  "peerDependencies": {
80
81
  "@doc-tools/transform": "^3.3.2",
81
- "@gravity-ui/page-constructor": "^4.0.0",
82
- "@gravity-ui/uikit": "^5.1.0",
82
+ "@gravity-ui/page-constructor": "^4.26.0",
83
+ "@gravity-ui/uikit": "^5.12.0",
83
84
  "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
84
85
  },
85
86
  "devDependencies": {
@@ -87,18 +88,20 @@
87
88
  "@babel/preset-react": "^7.22.5",
88
89
  "@babel/preset-typescript": "^7.22.5",
89
90
  "@commitlint/config-conventional": "^17.4.3",
90
- "@doc-tools/transform": "^3.3.2",
91
- "@gravity-ui/eslint-config": "^2.0.0",
92
- "@gravity-ui/page-constructor": "^4.20.2",
93
- "@gravity-ui/prettier-config": "^1.0.1",
94
- "@gravity-ui/stylelint-config": "^1.0.0",
91
+ "@doc-tools/transform": "^3.11.0",
92
+ "@gravity-ui/eslint-config": "^3.1.1",
93
+ "@gravity-ui/page-constructor": "^4.28.0",
94
+ "@gravity-ui/prettier-config": "^1.1.0",
95
+ "@gravity-ui/stylelint-config": "^4.0.1",
95
96
  "@gravity-ui/tsconfig": "^1.0.0",
96
- "@gravity-ui/uikit": "^5.11.0",
97
+ "@gravity-ui/uikit": "^5.17.0",
98
+ "@jest/environment": "^29.7.0",
97
99
  "@storybook/addon-essentials": "^7.0.27",
98
100
  "@storybook/cli": "^7.0.27",
99
101
  "@storybook/preset-scss": "^1.0.3",
100
102
  "@storybook/react": "^7.0.27",
101
103
  "@storybook/react-webpack5": "^7.0.27",
104
+ "@testing-library/dom": "^9.3.3",
102
105
  "@testing-library/jest-dom": "^5.16.5",
103
106
  "@testing-library/react": "^14.0.0",
104
107
  "@testing-library/user-event": "^14.4.3",
@@ -128,14 +131,14 @@
128
131
  "lint-staged": "^11.2.6",
129
132
  "npm-run-all": "^4.1.5",
130
133
  "postcss": "^8.4.14",
131
- "prettier": "2.4.1",
134
+ "prettier": "^3.0.3",
132
135
  "react": "^18.2.0",
133
136
  "react-dom": "^18.2.0",
134
137
  "rimraf": "^3.0.2",
135
138
  "sass": "^1.54.4",
136
139
  "sass-loader": "^13.3.1",
137
140
  "storybook": "^7.0.27",
138
- "stylelint": "^14.11.0",
141
+ "stylelint": "^15.11.0",
139
142
  "ts-jest": "^29.0.5",
140
143
  "typescript": "^4.9.3"
141
144
  },
package/styles/fonts.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @font-face {
2
2
  font-family: 'YS Display';
3
- src: url('https://yastatic.net/s3/home/fonts/ys/1/display-thin.woff2') format('woff2'),
3
+ src:
4
+ url('https://yastatic.net/s3/home/fonts/ys/1/display-thin.woff2') format('woff2'),
4
5
  url('https://yastatic.net/s3/home/fonts/ys/1/display-thin.woff') format('woff');
5
6
  font-weight: 100;
6
7
  font-style: normal;
@@ -9,7 +10,8 @@
9
10
 
10
11
  @font-face {
11
12
  font-family: 'YS Display';
12
- src: url('https://yastatic.net/s3/home/fonts/ys/1/display-light.woff2') format('woff2'),
13
+ src:
14
+ url('https://yastatic.net/s3/home/fonts/ys/1/display-light.woff2') format('woff2'),
13
15
  url('https://yastatic.net/s3/home/fonts/ys/1/display-light.woff') format('woff');
14
16
  font-weight: 300;
15
17
  font-style: normal;
@@ -18,7 +20,8 @@
18
20
 
19
21
  @font-face {
20
22
  font-family: 'YS Display';
21
- src: url('https://yastatic.net/s3/home/fonts/ys/1/display-regular.woff2') format('woff2'),
23
+ src:
24
+ url('https://yastatic.net/s3/home/fonts/ys/1/display-regular.woff2') format('woff2'),
22
25
  url('https://yastatic.net/s3/home/fonts/ys/1/display-regular.woff') format('woff');
23
26
  font-weight: 400;
24
27
  font-style: normal;
@@ -27,7 +30,8 @@
27
30
 
28
31
  @font-face {
29
32
  font-family: 'YS Display';
30
- src: url('https://yastatic.net/s3/home/fonts/ys/1/display-medium.woff2') format('woff2'),
33
+ src:
34
+ url('https://yastatic.net/s3/home/fonts/ys/1/display-medium.woff2') format('woff2'),
31
35
  url('https://yastatic.net/s3/home/fonts/ys/1/display-medium.woff') format('woff');
32
36
  font-weight: 500;
33
37
  font-style: normal;
@@ -36,7 +40,8 @@
36
40
 
37
41
  @font-face {
38
42
  font-family: 'YS Display';
39
- src: url('https://yastatic.net/s3/home/fonts/ys/1/display-bold.woff2') format('woff2'),
43
+ src:
44
+ url('https://yastatic.net/s3/home/fonts/ys/1/display-bold.woff2') format('woff2'),
40
45
  url('https://yastatic.net/s3/home/fonts/ys/1/display-bold.woff') format('woff');
41
46
  font-weight: 700;
42
47
  font-style: normal;
@@ -45,7 +50,8 @@
45
50
 
46
51
  @font-face {
47
52
  font-family: 'YS Display';
48
- src: url('https://yastatic.net/s3/home/fonts/ys/1/display-heavy.woff2') format('woff2'),
53
+ src:
54
+ url('https://yastatic.net/s3/home/fonts/ys/1/display-heavy.woff2') format('woff2'),
49
55
  url('https://yastatic.net/s3/home/fonts/ys/1/display-heavy.woff') format('woff');
50
56
  font-weight: 900;
51
57
  font-style: normal;
@@ -54,7 +60,8 @@
54
60
 
55
61
  @font-face {
56
62
  font-family: 'YS Text';
57
- src: url('https://yastatic.net/s3/home/fonts/ys/1/text-light.woff2') format('woff2'),
63
+ src:
64
+ url('https://yastatic.net/s3/home/fonts/ys/1/text-light.woff2') format('woff2'),
58
65
  url('https://yastatic.net/s3/home/fonts/ys/1/text-light.woff') format('woff');
59
66
  font-weight: 300;
60
67
  font-style: normal;
@@ -63,7 +70,8 @@
63
70
 
64
71
  @font-face {
65
72
  font-family: 'YS Text';
66
- src: url('https://yastatic.net/s3/home/fonts/ys/1/text-light-italic.woff2') format('woff2'),
73
+ src:
74
+ url('https://yastatic.net/s3/home/fonts/ys/1/text-light-italic.woff2') format('woff2'),
67
75
  url('https://yastatic.net/s3/home/fonts/ys/1/text-light-italic.woff') format('woff');
68
76
  font-weight: 300;
69
77
  font-style: italic;
@@ -72,7 +80,8 @@
72
80
 
73
81
  @font-face {
74
82
  font-family: 'YS Text';
75
- src: url('https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff2') format('woff2'),
83
+ src:
84
+ url('https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff2') format('woff2'),
76
85
  url('https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff') format('woff');
77
86
  font-weight: 400;
78
87
  font-style: normal;
@@ -81,7 +90,8 @@
81
90
 
82
91
  @font-face {
83
92
  font-family: 'YS Text';
84
- src: url('https://yastatic.net/s3/home/fonts/ys/1/text-regular-italic.woff2') format('woff2'),
93
+ src:
94
+ url('https://yastatic.net/s3/home/fonts/ys/1/text-regular-italic.woff2') format('woff2'),
85
95
  url('https://yastatic.net/s3/home/fonts/ys/1/text-regular-italic.woff') format('woff');
86
96
  font-weight: 400;
87
97
  font-style: italic;
@@ -90,7 +100,8 @@
90
100
 
91
101
  @font-face {
92
102
  font-family: 'YS Text';
93
- src: url('https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff2') format('woff2'),
103
+ src:
104
+ url('https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff2') format('woff2'),
94
105
  url('https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff') format('woff');
95
106
  font-weight: 500;
96
107
  font-style: normal;
@@ -99,7 +110,8 @@
99
110
 
100
111
  @font-face {
101
112
  font-family: 'YS Text';
102
- src: url('https://yastatic.net/s3/home/fonts/ys/1/text-medium-italic.woff2') format('woff2'),
113
+ src:
114
+ url('https://yastatic.net/s3/home/fonts/ys/1/text-medium-italic.woff2') format('woff2'),
103
115
  url('https://yastatic.net/s3/home/fonts/ys/1/text-medium-italic.woff') format('woff');
104
116
  font-weight: 500;
105
117
  font-style: italic;
@@ -108,7 +120,8 @@
108
120
 
109
121
  @font-face {
110
122
  font-family: 'YS Text';
111
- src: url('https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff2') format('woff2'),
123
+ src:
124
+ url('https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff2') format('woff2'),
112
125
  url('https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff') format('woff');
113
126
  font-weight: 700;
114
127
  font-style: normal;
@@ -117,7 +130,8 @@
117
130
 
118
131
  @font-face {
119
132
  font-family: 'YS Text';
120
- src: url('https://yastatic.net/s3/home/fonts/ys/1/text-bold-italic.woff2') format('woff2'),
133
+ src:
134
+ url('https://yastatic.net/s3/home/fonts/ys/1/text-bold-italic.woff2') format('woff2'),
121
135
  url('https://yastatic.net/s3/home/fonts/ys/1/text-bold-italic.woff') format('woff');
122
136
  font-weight: 700;
123
137
  font-style: italic;
package/styles/yfm.css CHANGED
@@ -85,10 +85,20 @@ unpredictable css rules order in build */
85
85
  }
86
86
  .yfm_blog a {
87
87
  color: var(--g-color-text-link);
88
+ border-radius: var(--g-focus-border-radius);
88
89
  }
89
90
  .yfm_blog a:hover {
90
91
  color: var(--g-color-text-link-hover);
91
92
  }
93
+ .yfm_blog a:focus {
94
+ box-shadow: 0 0 0 2px var(--g-color-line-focus);
95
+ }
96
+ .yfm_blog a:focus:not(:focus-visible) {
97
+ box-shadow: none;
98
+ }
99
+ .yfm_blog a:focus {
100
+ outline: 0;
101
+ }
92
102
  .yfm_blog .yfm-tab:hover, .yfm_blog .yfm-tab:active {
93
103
  color: var(--g-color-text-link-hover);
94
104
  }
package/styles/yfm.scss CHANGED
@@ -98,10 +98,17 @@
98
98
 
99
99
  a {
100
100
  color: var(--g-color-text-link);
101
+ border-radius: var(--g-focus-border-radius);
101
102
 
102
103
  &:hover {
103
104
  color: var(--g-color-text-link-hover);
104
105
  }
106
+
107
+ @include focusable(0, 'box-shadow');
108
+
109
+ &:focus {
110
+ outline: 0;
111
+ }
105
112
  }
106
113
 
107
114
  .yfm-tab {