@gravity-ui/page-constructor 5.31.2 → 6.0.0-alpha.0

package/build/esm/blocks/Questions/QuestionBlockItem/QuestionBlockItem.css

@@ -1,4 +1,4 @@
-.pc-QuestionsBlockItem__title {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title {
   margin: 0;
 }
 
@@ -11,45 +11,55 @@ unpredictable css rules order in build */
 .pc-QuestionsBlockItem + .pc-QuestionsBlockItem {
   padding-top: 32px;
 }
-.pc-QuestionsBlockItem__title {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  border: none;
-  outline: none;
-  color: inherit;
-  background: none;
-  cursor: pointer;
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title {
   font-size: var(--g-text-header-1-font-size);
   line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--g-text-accent-font-weight);
-  position: relative;
-  display: block;
-  width: 100%;
-  padding-right: 24px;
-  text-align: start;
   cursor: pointer;
   border-radius: var(--g-focus-border-radius);
 }
-.pc-QuestionsBlockItem__title:focus {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: 0;
 }
-.pc-QuestionsBlockItem__title:focus:not(:focus-visible) {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-QuestionsBlockItem__title a {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title a {
   outline: none;
   color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
-.utilityfocus .pc-QuestionsBlockItem__title a:focus {
+.utilityfocus .pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title a:focus {
   outline: 2px solid #ffdb4d;
 }
-.pc-QuestionsBlockItem__title a:hover, .pc-QuestionsBlockItem__title a:active {
+.pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title a:hover, .pc-QuestionsBlockItem__title.pc-QuestionsBlockItem__title a:active {
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
+}
+
+.pc-QuestionsBlockItem__title-container {
+  margin: 0;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-right: 24px;
+  text-align: start;
+  cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-QuestionsBlockItem__title-container a {
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-QuestionsBlockItem__title-container a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-QuestionsBlockItem__title-container a:hover, .pc-QuestionsBlockItem__title-container a:active {
   --pc-text-header-color: var(--g-color-text-link-hover);
   color: var(--g-color-text-link-hover);
 }
@@ -75,4 +85,16 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
   margin-top: 12px;
+}
+.pc-QuestionsBlockItem__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  width: 100%;
 }

package/build/esm/blocks/Questions/QuestionBlockItem/QuestionBlockItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useActionHandlers } from '@gravity-ui/uikit';
-import { Foldable, HTML, ToggleArrow, YFMWrapper } from '../../../components';
+import { Foldable, ToggleArrow, YFMWrapper } from '../../../components';
 import Link from '../../../components/Link/Link';
 import { block } from '../../../utils';
 import { FaqMicrodataValues } from '../models';
@@ -9,9 +9,11 @@ const b = block('QuestionsBlockItem');
 export const QuestionBlockItem = ({ title: itemTitle, text: itemText, link, listStyle = 'dash', isOpened, onClick, }) => {
     const { onKeyDown } = useActionHandlers(onClick);
     return (React.createElement("div", { className: b(), itemScope: true, itemProp: FaqMicrodataValues.QuestionProp, itemType: FaqMicrodataValues.QuestionType, role: 'listitem' },
-        React.createElement("button", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown },
-            React.createElement(HTML, { itemProp: FaqMicrodataValues.QuestionNameProp }, itemTitle),
-            React.createElement(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
+        React.createElement("button", { className: b('button'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown },
+            React.createElement(YFMWrapper, { tagName: "h3", className: b('title-container'), contentClassName: b('title'), itemProp: FaqMicrodataValues.QuestionNameProp, content: itemTitle, modifiers: {
+                    constructor: true,
+                }, onClick: onClick, tabIndex: 0 },
+                React.createElement(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') }))),
         React.createElement(Foldable, { isOpened: isOpened },
             React.createElement("div", { className: b('text'), itemScope: true, itemProp: FaqMicrodataValues.AnswerProp, itemType: FaqMicrodataValues.AnswerType, "aria-hidden": !isOpened },
                 React.createElement(YFMWrapper, { content: itemText, modifiers: {

package/build/esm/blocks/Slider/Arrow/Arrow.css

@@ -1,36 +1,25 @@
-.pc-slider-block-arrow__button {
+.pc-slider-block-arrow__inner {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
-.pc-slider-block-arrow__button:hover {
+.pc-slider-block-arrow__inner:hover {
   box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-slider-block-arrow__icon-wrapper, .pc-slider-block-arrow__button, .pc-slider-block-arrow {
+.pc-slider-block-arrow__icon-wrapper, .pc-slider-block-arrow__inner, .pc-slider-block-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.pc-slider-block-arrow {
-  width: 42px;
-  height: 42px;
-  cursor: pointer;
-}
 @media (max-width: 576px) {
   .pc-slider-block-arrow {
     display: none;
   }
 }
-.pc-slider-block-arrow_type_left {
-  margin-right: 16px;
-}
-.pc-slider-block-arrow_type_left .pc-slider-block-arrow__icon-wrapper {
-  transform: rotate(180deg);
-}
 .pc-slider-block-arrow__button {
   display: inline-block;
   margin: 0;
@@ -41,6 +30,15 @@ unpredictable css rules order in build */
   color: inherit;
   background: none;
   cursor: pointer;
+}
+.pc-slider-block-arrow__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-slider-block-arrow__button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-slider-block-arrow__inner {
   width: 42px;
   height: 42px;
   color: var(--g-color-text-secondary);
@@ -49,17 +47,20 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 1s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
-.pc-slider-block-arrow__button:focus {
-  outline: 2px solid var(--g-color-line-focus);
-  outline-offset: 0;
-}
-.pc-slider-block-arrow__button:focus:not(:focus-visible) {
-  outline: 0;
+.pc-slider-block-arrow__inner_type_left .pc-slider-block-arrow__icon-wrapper {
+  transform: rotate(180deg);
 }
-.pc-slider-block-arrow:hover .pc-slider-block-arrow__button {
+.pc-slider-block-arrow__inner:hover {
   color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
 }
+.pc-slider-block-arrow__inner_transparent {
+  background-color: transparent;
+  box-shadow: none;
+}
+.pc-slider-block-arrow__inner_transparent:hover {
+  box-shadow: none;
+}
 .pc-slider-block-arrow__icon {
   position: relative;
 }

package/build/esm/blocks/Slider/Arrow/Arrow.d.ts

@@ -1,10 +1,13 @@
+import React from 'react';
 import { ClassNameProps } from '../../../models';
 import './Arrow.css';
 export type ArrowType = 'left' | 'right';
 export interface ArrowProps {
     type: ArrowType;
-    handleClick?: (direction: ArrowType) => void;
+    transparent?: boolean;
+    onClick?: () => void;
     size?: number;
+    extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
-declare const Arrow: ({ type, handleClick, className, size }: ArrowProps & ClassNameProps) => JSX.Element;
+declare const Arrow: ({ type, transparent, onClick, className, size, extraProps, }: ArrowProps & ClassNameProps) => JSX.Element;
 export default Arrow;

package/build/esm/blocks/Slider/Arrow/Arrow.js

@@ -4,8 +4,9 @@ import { block } from '../../../utils';
 import { i18n } from '../i18n';
 import './Arrow.css';
 const b = block('slider-block-arrow');
-const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
-    React.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type), "aria-label": i18n(`arrow-${type}`) },
-        React.createElement("span", { className: b('icon-wrapper') },
-            React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
+const Arrow = ({ type, transparent, onClick, className, size = 16, extraProps, }) => (React.createElement("div", { className: b(null, className) },
+    React.createElement("button", Object.assign({ className: b('button'), onClick: onClick, "aria-label": i18n(`arrow-${type}`) }, extraProps),
+        React.createElement("div", { className: b('inner', { type, transparent }) },
+            React.createElement("span", { className: b('icon-wrapper') },
+                React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') }))))));
 export default Arrow;