@gravity-ui/page-constructor 4.28.0-alpha.0 → 4.28.1

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -35,18 +35,22 @@ unpredictable css rules order in build */
   --pc-selected-tab-item-background-color-hover: var(
       --pc-monochrome-button-background-color-hover
   );
+  --pc-color-line-focus-light: var(--g-color-text-brand);
+  --pc-color-line-focus-dark: var(--g-color-text-light-primary);
 }
 .g-root_theme_light {
   --pc-color-base-silver: #eff2f8;
   --pc-color-base-gold: #ffdb4d;
   --pc-color-base-asphalt: #313538;
   --pc-color-base-copper: #ffe6c4;
+  --g-color-line-focus: var(--pc-color-line-focus-light);
 }
 .g-root_theme_dark {
   --pc-color-base-silver: #bcc0c4;
   --pc-color-base-gold: #ffde5d;
   --pc-color-base-asphalt: #474d52;
   --pc-color-base-copper: #7f7262;
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
 }
 .g-root.g-root_theme_dark {
   --pc-color-sfx-shadow: var(--g-color-sfx-shadow);
@@ -95,7 +99,7 @@ unpredictable css rules order in build */
   margin: 0 0 12px;
 }
 .yfm_constructor.yfm_constructor p strong {
-  font-weight: 500;
+  font-weight: var(--g-text-accent-font-weight);
 }
 .yfm_constructor.yfm_constructor_size_s ul,
 .yfm_constructor.yfm_constructor_size_s ol,
@@ -124,6 +128,7 @@ unpredictable css rules order in build */
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
 }
 .utilityfocus .yfm_constructor a:focus {
   outline: 2px solid #ffdb4d;
@@ -132,6 +137,12 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.yfm_constructor a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.yfm_constructor a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
 .yfm_constructor table {
   color: var(--g-color-text-primary);
   border: 1px solid var(--g-color-line-generic);

package/build/esm/models/components.d.ts

@@ -1,4 +1,3 @@
 export type ArrowDirection = 'left' | 'right';
-export interface ReactPlayerBlockHandler {
-    pause: () => void;
+export interface ReactPlayerBlockHandler extends Pick<HTMLVideoElement, 'play' | 'pause' | 'addEventListener'> {
 }

package/build/esm/models/constructor-items/blocks.d.ts

@@ -103,6 +103,7 @@ export interface HeaderBlockProps {
     offset?: HeaderOffset;
     image?: ThemedImage;
     video?: ThemedMediaVideoProps;
+    mediaView?: 'fit' | 'full';
     background?: ThemedHeaderBlockBackground;
     theme?: 'light' | 'dark';
     verticalOffset?: 's' | 'm' | 'l' | 'xl';

package/build/esm/sub-blocks/BannerCard/BannerCard.css

@@ -4,6 +4,9 @@
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-banner-card_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__title,
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__subtitle {
   color: var(--g-color-text-light-primary);

package/build/esm/sub-blocks/Content/Content.css

@@ -91,6 +91,9 @@ unpredictable css rules order in build */
 .pc-content_size_l .pc-content__button {
   margin-top: 12px;
 }
+.pc-content_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-content_theme_dark .pc-content__title *,
 .pc-content_theme_dark .pc-content__text .yfm,
 .pc-content_theme_dark .pc-content__text .yfm *,

package/build/esm/sub-blocks/HubspotForm/HubspotForm.css

@@ -1,5 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-hubspot-form {
+  --g-color-line-focus: var(--pc-color-line-focus-light);
+}
 .pc-hubspot-form .submitted-message {
   padding-left: 10px;
 }
@@ -10,6 +13,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field > label {
   color: var(--g-color-text-primary);
   font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   display: flex;
   width: 200px;
   max-width: 100%;
@@ -77,7 +81,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input input[type=tel]:focus,
 .pc-hubspot-form .hs-form-field .input input[type=email]:focus,
 .pc-hubspot-form .hs-form-field .input textarea:focus {
-  border: 2px solid var(--g-color-base-brand);
+  border: 2px solid var(--g-color-line-focus);
   outline: none;
 }
 .pc-hubspot-form .hs-form-field .input textarea {
@@ -97,7 +101,7 @@ unpredictable css rules order in build */
   padding-right: 30px;
 }
 .pc-hubspot-form .hs-form-field .input select:focus {
-  border: 1px solid var(--g-color-line-generic-active);
+  border: 1px solid var(--g-color-line-focus);
 }
 .pc-hubspot-form .hs-form-field .input .hs-fieldtype-intl-phone.hs-input .hs-input {
   float: none;
@@ -139,7 +143,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:not(.hs-form-required) {
   color: var(--g-color-text-primary);
   font-size: var(--g-text-body-2-font-size);
-  line-height: 16px;
+  line-height: var(--g-text-body-2-line-height);
   padding-left: 7px;
   margin: 0;
   flex-grow: 1;
@@ -187,6 +191,10 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .hs-form-checkbox-display input:checked ~ span:before {
   background-color: #ffeba0;
 }
+.pc-hubspot-form .hs-form-field .hs-form-booleancheckbox-display input[type=checkbox]:focus ~ span::before,
+.pc-hubspot-form .hs-form-field .hs-form-checkbox-display input[type=checkbox]:focus ~ span::before {
+  outline: 2px solid var(--g-color-line-focus);
+}
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:before {
   content: "";
   position: absolute;
@@ -229,7 +237,17 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
   font-weight: var(--g-text-body-font-weight);
-  margin: 0 0 20px;
+  margin: 20px 0;
+}
+.pc-hubspot-form .hs-richtext a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.pc-hubspot-form .hs-richtext a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.pc-hubspot-form .hs-richtext a:focus {
+  outline: 0;
+  border-radius: var(--g-focus-border-radius);
 }
 .pc-hubspot-form .hs_error_rollup {
   padding-left: 10px;
@@ -238,6 +256,9 @@ unpredictable css rules order in build */
   font-weight: var(--g-text-body-font-weight);
   color: var(--g-color-text-danger);
 }
+.pc-hubspot-form .legal-consent-container {
+  padding-top: 8px;
+}
 .pc-hubspot-form .inputs-list {
   list-style: none;
   padding: 0;
@@ -301,9 +322,23 @@ unpredictable css rules order in build */
   white-space: nowrap;
   appearance: none;
 }
+.pc-hubspot-form .hs-button.primary:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 1px;
+}
+.pc-hubspot-form .hs-button.primary:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-hubspot-form .hs-button.primary:hover {
   background-color: var(--g-color-base-brand-hover);
 }
+.pc-hubspot-form .hs-button.primary:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 1px;
+}
+.pc-hubspot-form .hs-button.primary:focus:not(:focus-visible) {
+  outline: 0;
+}
 .pc-hubspot-form .grecaptcha-badge {
   box-shadow: none !important;
   border: 1px solid var(--g-color-line-generic);
@@ -355,6 +390,9 @@ unpredictable css rules order in build */
 .pc-hubspot-form_mobile .hs-button.primary {
   width: 80%;
 }
+.pc-hubspot-form_theme_dark {
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
 .pc-hubspot-form_theme_dark .hs-form-field .input select {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgMTEgNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMTAuMDggMEw1LjUgNC4zNi45MSAwIDAgLjg2bDUuNSA1LjI1TDExIC44NnoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==");
 }

package/build/esm/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css

@@ -16,7 +16,7 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-1-line-height);
 }
 .pc-price-description__main-title {
-  font-weight: 500;
+  font-weight: var(--g-text-accent-font-weight);
 }
 .pc-price-description__main-title_color_cornflower {
   color: var(--g-color-base-brand);

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.css

@@ -23,11 +23,29 @@ unpredictable css rules order in build */
   margin: auto 10px;
 }
 .pc-price-details__foldable_title {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   cursor: pointer;
   display: flex;
+  align-items: center;
   font-weight: 400;
-  font-size: var(--g-text-body-2-font-size);
-  line-height: var(--g-text-body-2-line-height);
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-price-details__foldable_title:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-price-details__foldable_title:focus:not(:focus-visible) {
+  outline: 0;
 }
 .pc-price-details__foldable_title_color_cornflower {
   color: var(--g-color-text-link);

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.js

@@ -26,7 +26,7 @@ const PriceDetails = (props) => {
         return React.createElement("div", { className: b('foldable_block') }, getPriceDetails());
     };
     const getFoldableTitle = () => {
-        return (React.createElement("div", { className: b('foldable_title', { color: foldableColor, size: foldableSize }), onClick: toggleOpen },
+        return (React.createElement("button", { className: b('foldable_title', { color: foldableColor, size: foldableSize }), onClick: toggleOpen, "aria-expanded": isOpened },
             foldableTitle,
             React.createElement(ToggleArrow, { open: isOpened, size: 14, type: 'vertical', className: b('arrow') })));
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.28.0-alpha.0",
+  "version": "4.28.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -104,7 +104,7 @@
   },
   "peerDependencies": {
     "@doc-tools/transform": "^3.3.2",
-    "@gravity-ui/uikit": "^5.4.1",
+    "@gravity-ui/uikit": "^5.12.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -120,7 +120,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.9.1",
+    "@gravity-ui/uikit": "^5.12.2",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-knobs": "^7.0.2",

package/server/models/components.d.ts

@@ -1,4 +1,3 @@
 export type ArrowDirection = 'left' | 'right';
-export interface ReactPlayerBlockHandler {
-    pause: () => void;
+export interface ReactPlayerBlockHandler extends Pick<HTMLVideoElement, 'play' | 'pause' | 'addEventListener'> {
 }

package/server/models/constructor-items/blocks.d.ts

@@ -103,6 +103,7 @@ export interface HeaderBlockProps {
     offset?: HeaderOffset;
     image?: ThemedImage;
     video?: ThemedMediaVideoProps;
+    mediaView?: 'fit' | 'full';
     background?: ThemedHeaderBlockBackground;
     theme?: 'light' | 'dark';
     verticalOffset?: 's' | 'm' | 'l' | 'xl';

package/styles/mixins.scss

@@ -8,6 +8,26 @@
     line-height: var(--g-text-#{$name}-line-height);
 }
 
+@mixin focusable($offset: 0, $mode: 'outline') {
+    @if $mode == 'outline' {
+        &:focus {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: $offset;
+        }
+        &:focus:not(:focus-visible) {
+            outline: 0;
+        }
+    }
+    @if $mode == 'box-shadow' {
+        &:focus {
+            box-shadow: 0 0 0 2px var(--g-color-line-focus);
+        }
+        &:focus:not(:focus-visible) {
+            box-shadow: none;
+        }
+    }
+}
+
 @mixin link() {
     @include islands-focus();
 

package/styles/root.scss

@@ -35,12 +35,18 @@
         --pc-monochrome-button-background-color-hover
     );
 
+    // focus color
+    --pc-color-line-focus-light: var(--g-color-text-brand);
+    --pc-color-line-focus-dark: var(--g-color-text-light-primary);
+
     &_theme_light {
         @include pc-colors-light;
+        --g-color-line-focus: var(--pc-color-line-focus-light);
     }
 
     &_theme_dark {
         @include pc-colors-dark;
+        --g-color-line-focus: var(--pc-color-line-focus-dark);
     }
 
     &.g-root_theme_dark {

package/styles/styles.css

@@ -41,7 +41,7 @@ unpredictable css rules order in build */
   margin: 0 0 12px;
 }
 .yfm_constructor.yfm_constructor p strong {
-  font-weight: 500;
+  font-weight: var(--g-text-accent-font-weight);
 }
 .yfm_constructor.yfm_constructor_size_s ul,
 .yfm_constructor.yfm_constructor_size_s ol,
@@ -70,6 +70,7 @@ unpredictable css rules order in build */
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
 }
 .utilityfocus .yfm_constructor a:focus {
   outline: 2px solid #ffdb4d;
@@ -78,6 +79,12 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
+.yfm_constructor a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.yfm_constructor a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
 .yfm_constructor table {
   color: var(--g-color-text-primary);
   border: 1px solid var(--g-color-line-generic);

package/styles/yfm.scss

@@ -49,7 +49,7 @@
         }
 
         p strong {
-            font-weight: 500;
+            font-weight: var(--g-text-accent-font-weight);
         }
 
         &_size_s {
@@ -85,6 +85,8 @@
 
     a {
         @include link();
+        @include focusable(0, 'box-shadow');
+        border-radius: var(--g-focus-border-radius);
     }
 
     table {