@gravity-ui/page-constructor 1.0.0

package/build/esm/blocks/Header/schema.js

@@ -0,0 +1,104 @@
+import { ImageProps, VideoProps, withTheme, BlockBaseProps, ButtonBlock, MediaProps, } from '../../schema/validators/common';
+import { filteredArray } from '../../schema/validators/utils';
+const HeaderMedia = {
+    type: 'object',
+    additionalProperties: false,
+    required: [],
+    properties: Object.assign(Object.assign({}, MediaProps), { fullWidth: { type: 'boolean' } }),
+};
+export const HeaderProperties = {
+    title: {
+        type: 'string',
+    },
+    overtitle: {
+        type: 'string',
+    },
+    description: {
+        type: 'string',
+    },
+    width: {
+        type: 'string',
+        enum: ['s', 'm', 'l'],
+    },
+    buttons: filteredArray(ButtonBlock),
+    offset: {
+        type: 'string',
+        enum: ['default', 'large'],
+    },
+    image: withTheme(ImageProps),
+    video: withTheme(VideoProps),
+    backLink: {
+        type: 'object',
+        required: ['url', 'title'],
+        properties: {
+            url: {
+                type: 'string',
+            },
+            title: {
+                type: 'string',
+            },
+        },
+    },
+    imageSize: {
+        type: 'string',
+        enum: ['s', 'm'],
+    },
+    verticalOffset: {
+        type: 'string',
+        enum: ['s', 'm', 'l', 'xl'],
+    },
+    background: withTheme({
+        oneOf: [
+            HeaderMedia,
+            {
+                type: 'object',
+                additionalProperties: false,
+                properties: {
+                    color: { type: 'string' },
+                    url: { type: 'string' },
+                    disableCompress: { type: 'boolean' },
+                    fullWidth: { type: 'boolean' },
+                    fullWidthMedia: { type: 'boolean' },
+                },
+            },
+        ],
+    }),
+    theme: {
+        type: 'string',
+        enum: ['default', 'dark'],
+    },
+    breadcrumbs: {
+        type: 'object',
+        additionalProperties: false,
+        required: ['items'],
+        properties: {
+            items: {
+                type: 'array',
+                items: {
+                    type: 'object',
+                    additionalProperties: false,
+                    required: ['url', 'text'],
+                    properties: {
+                        url: {
+                            type: 'string',
+                        },
+                        text: {
+                            type: 'string',
+                        },
+                    },
+                },
+            },
+            theme: { type: 'string', enum: ['light', 'dark'] },
+        },
+    },
+    status: {
+        type: 'string',
+    },
+};
+export const HeaderBlock = {
+    'header-block': {
+        additionalProperties: false,
+        required: ['title'],
+        properties: Object.assign(Object.assign({}, BlockBaseProps), HeaderProperties),
+    },
+};

package/build/esm/blocks/Header/utils.d.ts

@@ -0,0 +1,20 @@
+import { HeaderImageSize, HeaderWidth } from '../../models';
+export declare function titleWithImageSizes(imageSize: HeaderImageSize): {
+    md: number;
+    all: number;
+} | {
+    all: number;
+    md?: undefined;
+};
+export declare function getTitleSizes(width: HeaderWidth): {
+    lg: number;
+    sm: number;
+    md: number;
+    all: number;
+} | {
+    all: number;
+    lg?: undefined;
+    sm?: undefined;
+    md?: undefined;
+};
+export declare function getImageSize(width: HeaderWidth): "s" | "m";

package/build/esm/blocks/Header/utils.js

@@ -0,0 +1,45 @@
+export function titleWithImageSizes(imageSize) {
+    switch (imageSize) {
+        case 's':
+            return {
+                md: 8,
+                all: 12,
+            };
+        case 'm':
+            return {
+                md: 6,
+                all: 12,
+            };
+        default:
+            return { all: 12 };
+    }
+}
+export function getTitleSizes(width) {
+    switch (width) {
+        case 's':
+            return {
+                lg: 6,
+                sm: 12,
+                md: 8,
+                all: 12,
+            };
+        case 'm':
+            return {
+                lg: 8,
+                md: 8,
+                sm: 12,
+                all: 12,
+            };
+        default:
+            return { all: 12 };
+    }
+}
+export function getImageSize(width) {
+    switch (width) {
+        case 'm':
+            return 's';
+        case 's':
+        default:
+            return 'm';
+    }
+}

package/build/esm/blocks/HeaderSlider/HeaderSlider.css

@@ -0,0 +1,52 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-header-slider-block__item {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+  transform: translateZ(0);
+}
+.pc-header-slider-block__item-content {
+  height: inherit;
+  overflow: hidden;
+}
+.pc-header-slider-block__item-content.pc-header-slider-block__item-content {
+  margin: 0 0 16px;
+}
+
+.pc-header-slider-block__item-content .pc-header-block__content {
+  padding: 115px 0;
+  display: flex;
+  align-items: center;
+}
+.pc-header-slider-block__item-content .pc-Grid,
+.pc-header-slider-block__item-content .container-fluid,
+.pc-header-slider-block__item-content .container-fluid .row {
+  height: inherit;
+}
+.pc-header-slider-block__item-content .pc-header-block__media {
+  padding-bottom: 48px;
+  padding-top: 16px;
+}
+@media (max-width: 1410px) and (min-width: 577px) {
+  .pc-header-slider-block__item-content .pc-header-block__content {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+@media (max-width: 769px) {
+  .pc-header-slider-block.pc-SliderBlock {
+    margin-left: -8px;
+    padding-left: 0;
+    width: calc(100% + 8px);
+  }
+}
+@media (max-width: 577px) {
+  .pc-header-slider-block__item-content .pc-header-block__content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .pc-header-slider-block .slick-track .slick-slide {
+    max-width: 100%;
+  }
+}

package/build/esm/blocks/HeaderSlider/HeaderSlider.d.ts

@@ -0,0 +1,4 @@
+import { HeaderSliderBlockProps } from '../../models';
+import './HeaderSlider.css';
+export declare const HeaderSliderBlock: ({ items, arrows, ...props }: HeaderSliderBlockProps) => JSX.Element;
+export default HeaderSliderBlock;

package/build/esm/blocks/HeaderSlider/HeaderSlider.js

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import React, { useContext } from 'react';
+import { block } from '../../utils';
+import { SliderType } from '../../models';
+import { SliderBlock } from '../index';
+import Header from '../Header/Header';
+import { MobileContext } from '../../context/mobileContext';
+import './HeaderSlider.css';
+const b = block('header-slider-block');
+export const HeaderSliderBlock = (_a) => {
+    var { items, arrows } = _a, props = __rest(_a, ["items", "arrows"]);
+    const isMobile = useContext(MobileContext);
+    const showArrows = isMobile ? false : arrows;
+    return (React.createElement("div", { className: b('wrapper'), "data-qa": "header-slider" },
+        React.createElement(SliderBlock, Object.assign({}, props, { arrows: showArrows, slidesToShow: 1, type: SliderType.HeaderCard, animated: false, blockClassName: b(), arrowSize: 20 }), items.map((item, index) => (React.createElement("div", { key: index, className: b('item'), "data-qa": `header-slider-item-${index + 1}` },
+            React.createElement(Header, Object.assign({}, item, { className: b('item-content') }))))))));
+};
+export default HeaderSliderBlock;