@gravity-ui/page-constructor 7.5.1-alpha.0 → 7.5.1-alpha.2

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 (7) hide show
  1. package/build/cjs/blocks/Header/Header.d.ts +1 -0
  2. package/build/cjs/blocks/Header/Header.js +2 -2
  3. package/build/cjs/blocks/Header/Header.js.map +1 -1
  4. package/build/esm/blocks/Header/Header.d.ts +1 -0
  5. package/build/esm/blocks/Header/Header.js +2 -2
  6. package/build/esm/blocks/Header/Header.js.map +1 -1
  7. package/package.json +1 -1
package/build/cjs/blocks/Header/Header.d.ts CHANGED
@@ -3,6 +3,7 @@ import { ClassNameProps, HeaderBlockProps } from "../../models/index.js";
3
3
  type ElementsClassName = {
4
4
  gridClassName?: string;
5
5
  mediaClassName?: string;
6
+ contentWrapperClassName?: string;
6
7
  };
7
8
  export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;
8
9
  export declare const HeaderBlock: (props: React.PropsWithChildren<HeaderBlockFullProps>) => import("react/jsx-runtime").JSX.Element;
package/build/cjs/blocks/Header/Header.js CHANGED
@@ -25,7 +25,7 @@ const Background = ({ background, isMobile }) => {
25
25
  };
26
26
  const FullWidthBackground = ({ background }) => ((0, jsx_runtime_1.jsx)("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background?.color } }));
27
27
  const HeaderBlock = (props) => {
28
- const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, gridClassName, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, mediaClassName, } = props;
28
+ const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, gridClassName, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, mediaClassName, contentWrapperClassName, } = props;
29
29
  const windowWidth = (0, windowWidthContext_1.useWindowWidth)();
30
30
  const isMobile = windowWidth <= constants_1.BREAKPOINTS.sm;
31
31
  const theme = (0, theme_1.useTheme)();
@@ -47,7 +47,7 @@ const HeaderBlock = (props) => {
47
47
  ['full-width']: fullWidth,
48
48
  ['media-view']: mediaView,
49
49
  ['controls-view']: textTheme,
50
- }, className), children: [backgroundThemed && fullWidth && (0, jsx_runtime_1.jsx)(FullWidthBackground, { background: backgroundThemed }), backgroundThemed && (0, jsx_runtime_1.jsx)(Background, { background: backgroundThemed, isMobile: isMobile }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { containerClass: b('container-fluid'), className: b(null, gridClassName), children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('breadcrumbs'), children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsx)(HeaderBreadcrumbs_1.default, { ...breadcrumbs, theme: textTheme }) }) })), (0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsxs)(grid_1.Col, { reset: true, className: b('content-wrapper'), children: [(0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('content', {
50
+ }, className), children: [backgroundThemed && fullWidth && (0, jsx_runtime_1.jsx)(FullWidthBackground, { background: backgroundThemed }), backgroundThemed && (0, jsx_runtime_1.jsx)(Background, { background: backgroundThemed, isMobile: isMobile }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { containerClass: b('container-fluid'), className: b(null, gridClassName), children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('breadcrumbs'), children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsx)(HeaderBreadcrumbs_1.default, { ...breadcrumbs, theme: textTheme }) }) })), (0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsxs)(grid_1.Col, { reset: true, className: b('content-wrapper', contentWrapperClassName), children: [(0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { className: b('content', {
51
51
  offset,
52
52
  theme: textTheme,
53
53
  'vertical-offset': curVerticalOffset,
package/build/cjs/blocks/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sourceRoot":"../../../../src","sources":["blocks/Header/Header.tsx"],"names":[],"mappings":";;;;;AAAA,+BAA+B;AAC/B,6CAA4C;AAG5C,0DAA2D;AAC3D,wHAAqF;AACrF,iEAAiE;AACjE,mGAAgE;AAChE,wDAA6C;AAC7C,8CAA0C;AAE1C,gDAAkD;AAClD,wDAA0D;AAE1D,sCAAyE;AAEzE,kFAAgE;AAChE,kDAA4C;AAE5C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAchC,MAAM,UAAU,GAAG,CAAC,EAAC,UAAU,EAAE,QAAQ,EAAkB,EAAE,EAAE;IAC3D,MAAM,EAAC,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAC,GAAG,UAAU,CAAC;IAC9D,MAAM,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,IAAA,qBAAa,EAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACrD,MAAM,WAAW,GAAG,CAAC,QAAQ,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,QAAQ,IAAI,KAAK,CAAC,CAAC;IAElF,OAAO,CACH,gCACI,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,EAAC,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,cAAc,EAAC,CAAC,EAC7E,KAAK,EAAE,EAAC,eAAe,EAAE,KAAK,EAAC,YAE9B,WAAW,IAAI,CACZ,uBAAC,kBAAK,OACE,UAAU,EACd,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAChC,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,EAC1B,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,EAC1B,YAAY,EAAE,IAAI,EAClB,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACnC,KAAK,EAAE,WAAW,GACpB,CACL,GACC,CACT,CAAC;AACN,CAAC,CAAC;AAMF,MAAM,mBAAmB,GAAG,CAAC,EAAC,UAAU,EAA2B,EAAE,EAAE,CAAC,CACpE,gCACI,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,EAAC,CAAC,YAAY,CAAC,EAAE,IAAI,EAAC,CAAC,EAClD,KAAK,EAAE,EAAC,eAAe,EAAE,UAAU,EAAE,KAAK,EAAC,GAC7C,CACL,CAAC;AAEK,MAAM,WAAW,GAAG,CAAC,KAAoD,EAAE,EAAE;IAChF,MAAM,EACF,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAK,GAAG,GAAG,EACX,SAAS,EACT,MAAM,GAAG,SAAS,EAClB,UAAU,EACV,KAAK,EAAE,SAAS,GAAG,OAAO,EAC1B,cAAc,GAAG,GAAG,EACpB,SAAS,EACT,aAAa,EACb,WAAW,EACX,MAAM,EACN,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,MAAM,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,GACjB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,IAAA,mCAAc,GAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,WAAW,IAAI,uBAAW,CAAC,EAAE,CAAC;IAC/C,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,iBAAiB,GAAG,OAAO,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,SAAS,IAAI,IAAA,oBAAY,EAAC,KAAK,CAAC,CAAC;IACtD,MAAM,UAAU,GAAG,iBAAiB,CAAC,CAAC,CAAC,IAAA,2BAAmB,EAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAA,qBAAa,EAAC,KAAK,CAAC,CAAC;IAChG,IAAI,iBAAiB,GAAG,cAAc,CAAC;IAEvC,IAAI,iBAAiB,IAAI,CAAC,cAAc,EAAE,CAAC;QACvC,iBAAiB,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,MAAM,gBAAgB,GAAG,UAAU,IAAI,IAAA,sBAAc,EAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACzE,MAAM,WAAW,GAAG,KAAK,IAAI,IAAA,sBAAc,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC1D,MAAM,WAAW,GAAG,KAAK,IAAI,IAAA,sBAAc,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC1D,MAAM,kBAAkB,GAAG,IAAA,+BAAmB,EAC1C,EAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAC,EACxC,EAAC,IAAI,EAAE,KAAK,EAAE,WAAW,EAAC,CAC7B,CAAC;IACF,MAAM,SAAS,GAAG,gBAAgB,EAAE,SAAS,IAAI,gBAAgB,EAAE,cAAc,CAAC;IAClF,MAAM,OAAO,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE5B,OAAO,CACH,oCACI,SAAS,EAAE,CAAC,CACR;YACI,CAAC,WAAW,CAAC,EAAE,iBAAiB;YAChC,CAAC,YAAY,CAAC,EAAE,SAAS;YACzB,CAAC,YAAY,CAAC,EAAE,SAAS;YACzB,CAAC,eAAe,CAAC,EAAE,SAAS;SAC/B,EACD,SAAS,CACZ,aAEA,gBAAgB,IAAI,SAAS,IAAI,uBAAC,mBAAmB,IAAC,UAAU,EAAE,gBAAgB,GAAI,EACtF,gBAAgB,IAAI,uBAAC,UAAU,IAAC,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,GAAI,EACrF,wBAAC,WAAI,IAAC,cAAc,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,aACxE,WAAW,IAAI,CACZ,uBAAC,UAAG,IAAC,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC5B,uBAAC,UAAG,cACA,uBAAC,2BAAiB,OAAK,WAAW,EAAE,KAAK,EAAE,SAAS,GAAI,GACtD,GACJ,CACT,EACD,uBAAC,UAAG,cACA,wBAAC,UAAG,IAAC,KAAK,QAAC,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,aACtC,uBAAC,UAAG,cACA,uBAAC,UAAG,IACA,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;4CACpB,MAAM;4CACN,KAAK,EAAE,SAAS;4CAChB,iBAAiB,EAAE,iBAAiB;yCACvC,CAAC,YAEF,wBAAC,UAAG,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,QAAQ,EAAC,CAAC,aAC5D,SAAS,IAAI,CACV,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YACzB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC7B,uBAAC,oBAAU,IACP,OAAO,EAAC,KAAK,EACb,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EACzB,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,GAChC,CACL,CAAC,CAAC,CAAC,CACA,SAAS,CACZ,GACC,CACT,EACD,wBAAC,oBAAU,IACP,OAAO,EAAE,KAAK,EACd,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC,EAC5B,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC/B,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAC,EAC3D,OAAO,EAAC,IAAI,EACZ,eAAe,EAAC,KAAK,aAEpB,MAAM,EACN,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,IAC/B,EACZ,WAAW,IAAI,CACZ,gCAAK,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC,YAChD,uBAAC,oBAAU,IACP,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE;4DACP,WAAW,EAAE,IAAI;4DACjB,gBAAgB,EAAE,SAAS;yDAC9B,GACH,GACA,CACT,EACA,cAAc,IAAI,CACf,gCAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC,YACpD,uBAAC,oBAAU,IACP,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE;4DACP,WAAW,EAAE,IAAI;4DACjB,gBAAgB,EAAE,SAAS;yDAC9B,GACH,GACA,CACT,EACA,OAAO,IAAI,CACR,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aAAU,gBAAgB,YACjD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,uBAAC,uBAAU,IAAC,IAAI,EAAE,MAAM,CAAC,GAAG,YACxB,uBAAC,mBAAM,IAEH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAC,IAAI,EACT,UAAU,EAAE;gEACR,kBAAkB,EAAE,OAAO;gEAC3B,GAAG,MAAM,CAAC,UAAU;6DACvB,KACG,MAAM,IAPL,KAAK,CAQZ,IAV6B,KAAK,CAW3B,CAChB,CAAC,GACA,CACT,EACA,QAAQ,IACP,GACJ,GACJ,EACL,iBAAiB,IAAI,CAClB,uBAAC,kBAAK,IACF,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,CAAC,YAAY,CAAC,EAAE,IAAI,EAAC,EAAE,cAAc,CAAC,EAC7D,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,EAC1B,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,KACtB,kBAAkB,GACxB,CACL,IACC,GACJ,IACH,IACF,CACZ,CAAC;AACN,CAAC,CAAC;AAlKW,QAAA,WAAW,eAkKtB;AAEF,kBAAe,mBAAW,CAAC","sourcesContent":["/* eslint-disable complexity */\nimport {useUniqId} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {Button, Media, RouterLink} from '../../components';\nimport HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport YFMWrapper from '../../components/YFMWrapper/YFMWrapper';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, Row} from '../../grid';\nimport {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';\nimport './Header.scss';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {BREAKPOINTS} from '../../constants';\n\nconst b = block('header-block');\n\ntype ElementsClassName = {\n gridClassName?: string;\n mediaClassName?: string;\n};\n\nexport type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;\n\ninterface BackgroundProps {\n background: HeaderBlockBackground;\n isMobile: boolean;\n}\n\nconst Background = ({background, isMobile}: BackgroundProps) => {\n const {url, image, fullWidthMedia, video, color} = background;\n const imageObject = url ? getMediaImage(url) : image;\n const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);\n\n return (\n <div\n className={b('background', {media: true, 'full-width-media': fullWidthMedia})}\n style={{backgroundColor: color}}\n >\n {renderMedia && (\n <Media\n {...background}\n className={b('background-media')}\n imageClassName={b('image')}\n videoClassName={b('video')}\n isBackground={true}\n parallax={false}\n video={isMobile ? undefined : video}\n image={imageObject}\n />\n )}\n </div>\n );\n};\n\ninterface FullWidthBackgroundProps {\n background: HeaderBlockBackground;\n}\n\nconst FullWidthBackground = ({background}: FullWidthBackgroundProps) => (\n <div\n className={b('background', {['full-width']: true})}\n style={{backgroundColor: background?.color}}\n />\n);\n\nexport const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>) => {\n const {\n title,\n overtitle,\n description,\n buttons,\n image,\n video,\n width = 'm',\n imageSize,\n offset = 'default',\n background,\n theme: textTheme = 'light',\n verticalOffset = 'm',\n className,\n gridClassName,\n breadcrumbs,\n status,\n renderTitle,\n children,\n mediaView = 'full',\n centered,\n additionalInfo,\n mediaClassName,\n } = props;\n const windowWidth = useWindowWidth();\n const isMobile = windowWidth <= BREAKPOINTS.sm;\n const theme = useTheme();\n const hasRightSideImage = Boolean((image || video) && !centered);\n const curImageSize = imageSize || getImageSize(width);\n const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);\n let curVerticalOffset = verticalOffset;\n\n if (hasRightSideImage && !verticalOffset) {\n curVerticalOffset = 'm';\n }\n\n const backgroundThemed = background && getThemedValue(background, theme);\n const imageThemed = image && getThemedValue(image, theme);\n const videoThemed = video && getThemedValue(video, theme);\n const mediaWithMicrodata = mergeVideoMicrodata(\n {video: videoThemed, image: imageThemed},\n {name: title, description},\n );\n const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;\n const titleId = useUniqId();\n\n return (\n <header\n className={b(\n {\n ['has-media']: hasRightSideImage,\n ['full-width']: fullWidth,\n ['media-view']: mediaView,\n ['controls-view']: textTheme,\n },\n className,\n )}\n >\n {backgroundThemed && fullWidth && <FullWidthBackground background={backgroundThemed} />}\n {backgroundThemed && <Background background={backgroundThemed} isMobile={isMobile} />}\n <Grid containerClass={b('container-fluid')} className={b(null, gridClassName)}>\n {breadcrumbs && (\n <Row className={b('breadcrumbs')}>\n <Col>\n <HeaderBreadcrumbs {...breadcrumbs} theme={textTheme} />\n </Col>\n </Row>\n )}\n <Row>\n <Col reset className={b('content-wrapper')}>\n <Row>\n <Col\n className={b('content', {\n offset,\n theme: textTheme,\n 'vertical-offset': curVerticalOffset,\n })}\n >\n <Col sizes={titleSizes} className={b('content-inner', {centered})}>\n {overtitle && (\n <div className={b('overtitle')}>\n {typeof overtitle === 'string' ? (\n <YFMWrapper\n tagName=\"div\"\n className={b('overtitle')}\n content={overtitle}\n modifiers={{constructor: true}}\n />\n ) : (\n overtitle\n )}\n </div>\n )}\n <YFMWrapper\n content={title}\n contentClassName={b('title')}\n className={b('title-container')}\n modifiers={{constructor: true, constructorTheme: textTheme}}\n tagName=\"h1\"\n contentPosition=\"end\"\n >\n {status}\n {renderTitle ? renderTitle(title) : null}\n </YFMWrapper>\n {description && (\n <div className={b('description', {theme: textTheme})}>\n <YFMWrapper\n content={description}\n modifiers={{\n constructor: true,\n constructorTheme: textTheme,\n }}\n />\n </div>\n )}\n {additionalInfo && (\n <div className={b('additional-info', {theme: textTheme})}>\n <YFMWrapper\n content={additionalInfo}\n modifiers={{\n constructor: true,\n constructorTheme: textTheme,\n }}\n />\n </div>\n )}\n {buttons && (\n <div className={b('buttons')} data-qa=\"header-buttons\">\n {buttons.map((button, index) => (\n <RouterLink href={button.url} key={index}>\n <Button\n key={index}\n className={b('button')}\n size=\"xl\"\n extraProps={{\n 'aria-describedby': titleId,\n ...button.extraProps,\n }}\n {...button}\n />\n </RouterLink>\n ))}\n </div>\n )}\n {children}\n </Col>\n </Col>\n </Row>\n {hasRightSideImage && (\n <Media\n className={b('media', {[curImageSize]: true}, mediaClassName)}\n videoClassName={b('video')}\n imageClassName={b('image')}\n {...mediaWithMicrodata}\n />\n )}\n </Col>\n </Row>\n </Grid>\n </header>\n );\n};\n\nexport default HeaderBlock;\n"]}
1
+ {"version":3,"file":"Header.js","sourceRoot":"../../../../src","sources":["blocks/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable complexity */\nimport {useUniqId} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {Button, Media, RouterLink} from '../../components';\nimport HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport YFMWrapper from '../../components/YFMWrapper/YFMWrapper';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, Row} from '../../grid';\nimport {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';\nimport './Header.scss';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {BREAKPOINTS} from '../../constants';\n\nconst b = block('header-block');\n\ntype ElementsClassName = {\n gridClassName?: string;\n mediaClassName?: string;\n contentWrapperClassName?: string;\n};\n\nexport type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;\n\ninterface BackgroundProps {\n background: HeaderBlockBackground;\n isMobile: boolean;\n}\n\nconst Background = ({background, isMobile}: BackgroundProps) => {\n const {url, image, fullWidthMedia, video, color} = background;\n const imageObject = url ? getMediaImage(url) : image;\n const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);\n\n return (\n <div\n className={b('background', {media: true, 'full-width-media': fullWidthMedia})}\n style={{backgroundColor: color}}\n >\n {renderMedia && (\n <Media\n {...background}\n className={b('background-media')}\n imageClassName={b('image')}\n videoClassName={b('video')}\n isBackground={true}\n parallax={false}\n video={isMobile ? undefined : video}\n image={imageObject}\n />\n )}\n </div>\n );\n};\n\ninterface FullWidthBackgroundProps {\n background: HeaderBlockBackground;\n}\n\nconst FullWidthBackground = ({background}: FullWidthBackgroundProps) => (\n <div\n className={b('background', {['full-width']: true})}\n style={{backgroundColor: background?.color}}\n />\n);\n\nexport const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>) => {\n const {\n title,\n overtitle,\n description,\n buttons,\n image,\n video,\n width = 'm',\n imageSize,\n offset = 'default',\n background,\n theme: textTheme = 'light',\n verticalOffset = 'm',\n className,\n gridClassName,\n breadcrumbs,\n status,\n renderTitle,\n children,\n mediaView = 'full',\n centered,\n additionalInfo,\n mediaClassName,\n contentWrapperClassName,\n } = props;\n const windowWidth = useWindowWidth();\n const isMobile = windowWidth <= BREAKPOINTS.sm;\n const theme = useTheme();\n const hasRightSideImage = Boolean((image || video) && !centered);\n const curImageSize = imageSize || getImageSize(width);\n const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);\n let curVerticalOffset = verticalOffset;\n\n if (hasRightSideImage && !verticalOffset) {\n curVerticalOffset = 'm';\n }\n\n const backgroundThemed = background && getThemedValue(background, theme);\n const imageThemed = image && getThemedValue(image, theme);\n const videoThemed = video && getThemedValue(video, theme);\n const mediaWithMicrodata = mergeVideoMicrodata(\n {video: videoThemed, image: imageThemed},\n {name: title, description},\n );\n const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;\n const titleId = useUniqId();\n\n return (\n <header\n className={b(\n {\n ['has-media']: hasRightSideImage,\n ['full-width']: fullWidth,\n ['media-view']: mediaView,\n ['controls-view']: textTheme,\n },\n className,\n )}\n >\n {backgroundThemed && fullWidth && <FullWidthBackground background={backgroundThemed} />}\n {backgroundThemed && <Background background={backgroundThemed} isMobile={isMobile} />}\n <Grid containerClass={b('container-fluid')} className={b(null, gridClassName)}>\n {breadcrumbs && (\n <Row className={b('breadcrumbs')}>\n <Col>\n <HeaderBreadcrumbs {...breadcrumbs} theme={textTheme} />\n </Col>\n </Row>\n )}\n <Row>\n <Col reset className={b('content-wrapper', contentWrapperClassName)}>\n <Row>\n <Col\n className={b('content', {\n offset,\n theme: textTheme,\n 'vertical-offset': curVerticalOffset,\n })}\n >\n <Col sizes={titleSizes} className={b('content-inner', {centered})}>\n {overtitle && (\n <div className={b('overtitle')}>\n {typeof overtitle === 'string' ? (\n <YFMWrapper\n tagName=\"div\"\n className={b('overtitle')}\n content={overtitle}\n modifiers={{constructor: true}}\n />\n ) : (\n overtitle\n )}\n </div>\n )}\n <YFMWrapper\n content={title}\n contentClassName={b('title')}\n className={b('title-container')}\n modifiers={{constructor: true, constructorTheme: textTheme}}\n tagName=\"h1\"\n contentPosition=\"end\"\n >\n {status}\n {renderTitle ? renderTitle(title) : null}\n </YFMWrapper>\n {description && (\n <div className={b('description', {theme: textTheme})}>\n <YFMWrapper\n content={description}\n modifiers={{\n constructor: true,\n constructorTheme: textTheme,\n }}\n />\n </div>\n )}\n {additionalInfo && (\n <div className={b('additional-info', {theme: textTheme})}>\n <YFMWrapper\n content={additionalInfo}\n modifiers={{\n constructor: true,\n constructorTheme: textTheme,\n }}\n />\n </div>\n )}\n {buttons && (\n <div className={b('buttons')} data-qa=\"header-buttons\">\n {buttons.map((button, index) => (\n <RouterLink href={button.url} key={index}>\n <Button\n key={index}\n className={b('button')}\n size=\"xl\"\n extraProps={{\n 'aria-describedby': titleId,\n ...button.extraProps,\n }}\n {...button}\n />\n </RouterLink>\n ))}\n </div>\n )}\n {children}\n </Col>\n </Col>\n </Row>\n {hasRightSideImage && (\n <Media\n className={b('media', {[curImageSize]: true}, mediaClassName)}\n videoClassName={b('video')}\n imageClassName={b('image')}\n {...mediaWithMicrodata}\n />\n )}\n </Col>\n </Row>\n </Grid>\n </header>\n );\n};\n\nexport default HeaderBlock;\n"]}
package/build/esm/blocks/Header/Header.d.ts CHANGED
@@ -4,6 +4,7 @@ import './Header.css';
4
4
  type ElementsClassName = {
5
5
  gridClassName?: string;
6
6
  mediaClassName?: string;
7
+ contentWrapperClassName?: string;
7
8
  };
8
9
  export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;
9
10
  export declare const HeaderBlock: (props: React.PropsWithChildren<HeaderBlockFullProps>) => import("react/jsx-runtime").JSX.Element;
package/build/esm/blocks/Header/Header.js CHANGED
@@ -22,7 +22,7 @@ const Background = ({ background, isMobile }) => {
22
22
  };
23
23
  const FullWidthBackground = ({ background }) => (_jsx("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background?.color } }));
24
24
  export const HeaderBlock = (props) => {
25
- const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, gridClassName, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, mediaClassName, } = props;
25
+ const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, gridClassName, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, mediaClassName, contentWrapperClassName, } = props;
26
26
  const windowWidth = useWindowWidth();
27
27
  const isMobile = windowWidth <= BREAKPOINTS.sm;
28
28
  const theme = useTheme();
@@ -44,7 +44,7 @@ export const HeaderBlock = (props) => {
44
44
  ['full-width']: fullWidth,
45
45
  ['media-view']: mediaView,
46
46
  ['controls-view']: textTheme,
47
- }, className), children: [backgroundThemed && fullWidth && _jsx(FullWidthBackground, { background: backgroundThemed }), backgroundThemed && _jsx(Background, { background: backgroundThemed, isMobile: isMobile }), _jsxs(Grid, { containerClass: b('container-fluid'), className: b(null, gridClassName), children: [breadcrumbs && (_jsx(Row, { className: b('breadcrumbs'), children: _jsx(Col, { children: _jsx(HeaderBreadcrumbs, { ...breadcrumbs, theme: textTheme }) }) })), _jsx(Row, { children: _jsxs(Col, { reset: true, className: b('content-wrapper'), children: [_jsx(Row, { children: _jsx(Col, { className: b('content', {
47
+ }, className), children: [backgroundThemed && fullWidth && _jsx(FullWidthBackground, { background: backgroundThemed }), backgroundThemed && _jsx(Background, { background: backgroundThemed, isMobile: isMobile }), _jsxs(Grid, { containerClass: b('container-fluid'), className: b(null, gridClassName), children: [breadcrumbs && (_jsx(Row, { className: b('breadcrumbs'), children: _jsx(Col, { children: _jsx(HeaderBreadcrumbs, { ...breadcrumbs, theme: textTheme }) }) })), _jsx(Row, { children: _jsxs(Col, { reset: true, className: b('content-wrapper', contentWrapperClassName), children: [_jsx(Row, { children: _jsx(Col, { className: b('content', {
48
48
  offset,
49
49
  theme: textTheme,
50
50
  'vertical-offset': curVerticalOffset,
package/build/esm/blocks/Header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sourceRoot":"../../../../src","sources":["blocks/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable complexity */\nimport {useUniqId} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {Button, Media, RouterLink} from '../../components';\nimport HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport YFMWrapper from '../../components/YFMWrapper/YFMWrapper';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, Row} from '../../grid';\nimport {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';\nimport './Header.scss';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {BREAKPOINTS} from '../../constants';\n\nconst b = block('header-block');\n\ntype ElementsClassName = {\n gridClassName?: string;\n mediaClassName?: string;\n};\n\nexport type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;\n\ninterface BackgroundProps {\n background: HeaderBlockBackground;\n isMobile: boolean;\n}\n\nconst Background = ({background, isMobile}: BackgroundProps) => {\n const {url, image, fullWidthMedia, video, color} = background;\n const imageObject = url ? getMediaImage(url) : image;\n const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);\n\n return (\n <div\n className={b('background', {media: true, 'full-width-media': fullWidthMedia})}\n style={{backgroundColor: color}}\n >\n {renderMedia && (\n <Media\n {...background}\n className={b('background-media')}\n imageClassName={b('image')}\n videoClassName={b('video')}\n isBackground={true}\n parallax={false}\n video={isMobile ? undefined : video}\n image={imageObject}\n />\n )}\n </div>\n );\n};\n\ninterface FullWidthBackgroundProps {\n background: HeaderBlockBackground;\n}\n\nconst FullWidthBackground = ({background}: FullWidthBackgroundProps) => (\n <div\n className={b('background', {['full-width']: true})}\n style={{backgroundColor: background?.color}}\n />\n);\n\nexport const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>) => {\n const {\n title,\n overtitle,\n description,\n buttons,\n image,\n video,\n width = 'm',\n imageSize,\n offset = 'default',\n background,\n theme: textTheme = 'light',\n verticalOffset = 'm',\n className,\n gridClassName,\n breadcrumbs,\n status,\n renderTitle,\n children,\n mediaView = 'full',\n centered,\n additionalInfo,\n mediaClassName,\n } = props;\n const windowWidth = useWindowWidth();\n const isMobile = windowWidth <= BREAKPOINTS.sm;\n const theme = useTheme();\n const hasRightSideImage = Boolean((image || video) && !centered);\n const curImageSize = imageSize || getImageSize(width);\n const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);\n let curVerticalOffset = verticalOffset;\n\n if (hasRightSideImage && !verticalOffset) {\n curVerticalOffset = 'm';\n }\n\n const backgroundThemed = background && getThemedValue(background, theme);\n const imageThemed = image && getThemedValue(image, theme);\n const videoThemed = video && getThemedValue(video, theme);\n const mediaWithMicrodata = mergeVideoMicrodata(\n {video: videoThemed, image: imageThemed},\n {name: title, description},\n );\n const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;\n const titleId = useUniqId();\n\n return (\n <header\n className={b(\n {\n ['has-media']: hasRightSideImage,\n ['full-width']: fullWidth,\n ['media-view']: mediaView,\n ['controls-view']: textTheme,\n },\n className,\n )}\n >\n {backgroundThemed && fullWidth && <FullWidthBackground background={backgroundThemed} />}\n {backgroundThemed && <Background background={backgroundThemed} isMobile={isMobile} />}\n <Grid containerClass={b('container-fluid')} className={b(null, gridClassName)}>\n {breadcrumbs && (\n <Row className={b('breadcrumbs')}>\n <Col>\n <HeaderBreadcrumbs {...breadcrumbs} theme={textTheme} />\n </Col>\n </Row>\n )}\n <Row>\n <Col reset className={b('content-wrapper')}>\n <Row>\n <Col\n className={b('content', {\n offset,\n theme: textTheme,\n 'vertical-offset': curVerticalOffset,\n })}\n >\n <Col sizes={titleSizes} className={b('content-inner', {centered})}>\n {overtitle && (\n <div className={b('overtitle')}>\n {typeof overtitle === 'string' ? (\n <YFMWrapper\n tagName=\"div\"\n className={b('overtitle')}\n content={overtitle}\n modifiers={{constructor: true}}\n />\n ) : (\n overtitle\n )}\n </div>\n )}\n <YFMWrapper\n content={title}\n contentClassName={b('title')}\n className={b('title-container')}\n modifiers={{constructor: true, constructorTheme: textTheme}}\n tagName=\"h1\"\n contentPosition=\"end\"\n >\n {status}\n {renderTitle ? renderTitle(title) : null}\n </YFMWrapper>\n {description && (\n <div className={b('description', {theme: textTheme})}>\n <YFMWrapper\n content={description}\n modifiers={{\n constructor: true,\n constructorTheme: textTheme,\n }}\n />\n </div>\n )}\n {additionalInfo && (\n <div className={b('additional-info', {theme: textTheme})}>\n <YFMWrapper\n content={additionalInfo}\n modifiers={{\n constructor: true,\n constructorTheme: textTheme,\n }}\n />\n </div>\n )}\n {buttons && (\n <div className={b('buttons')} data-qa=\"header-buttons\">\n {buttons.map((button, index) => (\n <RouterLink href={button.url} key={index}>\n <Button\n key={index}\n className={b('button')}\n size=\"xl\"\n extraProps={{\n 'aria-describedby': titleId,\n ...button.extraProps,\n }}\n {...button}\n />\n </RouterLink>\n ))}\n </div>\n )}\n {children}\n </Col>\n </Col>\n </Row>\n {hasRightSideImage && (\n <Media\n className={b('media', {[curImageSize]: true}, mediaClassName)}\n videoClassName={b('video')}\n imageClassName={b('image')}\n {...mediaWithMicrodata}\n />\n )}\n </Col>\n </Row>\n </Grid>\n </header>\n );\n};\n\nexport default HeaderBlock;\n"]}
1
+ {"version":3,"file":"Header.js","sourceRoot":"../../../../src","sources":["blocks/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable complexity */\nimport {useUniqId} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {Button, Media, RouterLink} from '../../components';\nimport HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport YFMWrapper from '../../components/YFMWrapper/YFMWrapper';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, Row} from '../../grid';\nimport {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';\nimport './Header.scss';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {BREAKPOINTS} from '../../constants';\n\nconst b = block('header-block');\n\ntype ElementsClassName = {\n gridClassName?: string;\n mediaClassName?: string;\n contentWrapperClassName?: string;\n};\n\nexport type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;\n\ninterface BackgroundProps {\n background: HeaderBlockBackground;\n isMobile: boolean;\n}\n\nconst Background = ({background, isMobile}: BackgroundProps) => {\n const {url, image, fullWidthMedia, video, color} = background;\n const imageObject = url ? getMediaImage(url) : image;\n const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);\n\n return (\n <div\n className={b('background', {media: true, 'full-width-media': fullWidthMedia})}\n style={{backgroundColor: color}}\n >\n {renderMedia && (\n <Media\n {...background}\n className={b('background-media')}\n imageClassName={b('image')}\n videoClassName={b('video')}\n isBackground={true}\n parallax={false}\n video={isMobile ? undefined : video}\n image={imageObject}\n />\n )}\n </div>\n );\n};\n\ninterface FullWidthBackgroundProps {\n background: HeaderBlockBackground;\n}\n\nconst FullWidthBackground = ({background}: FullWidthBackgroundProps) => (\n <div\n className={b('background', {['full-width']: true})}\n style={{backgroundColor: background?.color}}\n />\n);\n\nexport const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>) => {\n const {\n title,\n overtitle,\n description,\n buttons,\n image,\n video,\n width = 'm',\n imageSize,\n offset = 'default',\n background,\n theme: textTheme = 'light',\n verticalOffset = 'm',\n className,\n gridClassName,\n breadcrumbs,\n status,\n renderTitle,\n children,\n mediaView = 'full',\n centered,\n additionalInfo,\n mediaClassName,\n contentWrapperClassName,\n } = props;\n const windowWidth = useWindowWidth();\n const isMobile = windowWidth <= BREAKPOINTS.sm;\n const theme = useTheme();\n const hasRightSideImage = Boolean((image || video) && !centered);\n const curImageSize = imageSize || getImageSize(width);\n const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);\n let curVerticalOffset = verticalOffset;\n\n if (hasRightSideImage && !verticalOffset) {\n curVerticalOffset = 'm';\n }\n\n const backgroundThemed = background && getThemedValue(background, theme);\n const imageThemed = image && getThemedValue(image, theme);\n const videoThemed = video && getThemedValue(video, theme);\n const mediaWithMicrodata = mergeVideoMicrodata(\n {video: videoThemed, image: imageThemed},\n {name: title, description},\n );\n const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;\n const titleId = useUniqId();\n\n return (\n <header\n className={b(\n {\n ['has-media']: hasRightSideImage,\n ['full-width']: fullWidth,\n ['media-view']: mediaView,\n ['controls-view']: textTheme,\n },\n className,\n )}\n >\n {backgroundThemed && fullWidth && <FullWidthBackground background={backgroundThemed} />}\n {backgroundThemed && <Background background={backgroundThemed} isMobile={isMobile} />}\n <Grid containerClass={b('container-fluid')} className={b(null, gridClassName)}>\n {breadcrumbs && (\n <Row className={b('breadcrumbs')}>\n <Col>\n <HeaderBreadcrumbs {...breadcrumbs} theme={textTheme} />\n </Col>\n </Row>\n )}\n <Row>\n <Col reset className={b('content-wrapper', contentWrapperClassName)}>\n <Row>\n <Col\n className={b('content', {\n offset,\n theme: textTheme,\n 'vertical-offset': curVerticalOffset,\n })}\n >\n <Col sizes={titleSizes} className={b('content-inner', {centered})}>\n {overtitle && (\n <div className={b('overtitle')}>\n {typeof overtitle === 'string' ? (\n <YFMWrapper\n tagName=\"div\"\n className={b('overtitle')}\n content={overtitle}\n modifiers={{constructor: true}}\n />\n ) : (\n overtitle\n )}\n </div>\n )}\n <YFMWrapper\n content={title}\n contentClassName={b('title')}\n className={b('title-container')}\n modifiers={{constructor: true, constructorTheme: textTheme}}\n tagName=\"h1\"\n contentPosition=\"end\"\n >\n {status}\n {renderTitle ? renderTitle(title) : null}\n </YFMWrapper>\n {description && (\n <div className={b('description', {theme: textTheme})}>\n <YFMWrapper\n content={description}\n modifiers={{\n constructor: true,\n constructorTheme: textTheme,\n }}\n />\n </div>\n )}\n {additionalInfo && (\n <div className={b('additional-info', {theme: textTheme})}>\n <YFMWrapper\n content={additionalInfo}\n modifiers={{\n constructor: true,\n constructorTheme: textTheme,\n }}\n />\n </div>\n )}\n {buttons && (\n <div className={b('buttons')} data-qa=\"header-buttons\">\n {buttons.map((button, index) => (\n <RouterLink href={button.url} key={index}>\n <Button\n key={index}\n className={b('button')}\n size=\"xl\"\n extraProps={{\n 'aria-describedby': titleId,\n ...button.extraProps,\n }}\n {...button}\n />\n </RouterLink>\n ))}\n </div>\n )}\n {children}\n </Col>\n </Col>\n </Row>\n {hasRightSideImage && (\n <Media\n className={b('media', {[curImageSize]: true}, mediaClassName)}\n videoClassName={b('video')}\n imageClassName={b('image')}\n {...mediaWithMicrodata}\n />\n )}\n </Col>\n </Row>\n </Grid>\n </header>\n );\n};\n\nexport default HeaderBlock;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "7.5.1-alpha.0",
3
+ "version": "7.5.1-alpha.2",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "type": "commonjs",