Merge pull request #19 from gravity-ui/fixes

Fixes

Author: gorgeousvlad

src/blocks/ContentLayout/ContentLayout.scss

@@ -28,10 +28,6 @@ $block: '.#{$ns}content-layout-block';
         &_centered {
             margin-left: auto;
             margin-right: auto;
-
-            #{$block}__file {
-                justify-content: center;
-            }
         }
 
         a {

src/blocks/ContentLayout/__stories__/ContentLayout.stories.tsx

@@ -158,7 +158,7 @@ export const WithFiles = DefaultTemplate.bind([]);
 export const Size = SizesTemplate.bind([]);
 export const WithBackgroundSizeS = DefaultTemplate.bind([]);
 export const WithImageAndBackgroundSizeL = DefaultTemplate.bind([]);
-export const WithImageSizeLCentered = DefaultTemplate.bind([]);
+export const WithImageSizeSCentered = DefaultTemplate.bind([]);
 export const Theme = ThemesTemplate.bind([]);
 export const TextWidth = TextWidthTemplate.bind([]);
 export const TextWidthWithoutTitle = TextWidthTemplateWithoutTitle.bind([]);
@@ -169,7 +169,7 @@ Size.args = data.size.content as ContentLayoutBlockProps;
 WithBackgroundSizeS.args = data.withBackgroundSizeS.content as ContentLayoutBlockProps;
 WithImageAndBackgroundSizeL.args = data.withImageAndBackgroundSizeL
     .content as ContentLayoutBlockProps;
-WithImageSizeLCentered.args = data.withImageSizeLCentered.content as ContentLayoutBlockProps;
+WithImageSizeSCentered.args = data.withImageSizeSCentered.content as ContentLayoutBlockProps;
 Theme.args = data.theme.content as ContentLayoutBlockProps;
 TextWidth.args = data.textWidth.content as ContentLayoutBlockProps;
 TextWidthWithoutTitle.args = data.textWidthWithoutTitle.content as ContentLayoutBlockProps;

src/blocks/ContentLayout/__stories__/data.json

@@ -433,7 +433,7 @@
       ]
     }
   },
-  "withImageSizeLCentered": {
+  "withImageSizeSCentered": {
     "content": {
       "type": "content-layout-block",
       "properties": {
@@ -467,33 +467,7 @@
             "url": "/#contact-form"
           }
         ]
-      },
-      "fileContent": [
-        {
-          "href": "https://yandex.xls",
-          "text": "Certificate of Compliance (600 KB)"
-        },
-        {
-          "href": "https://yandex.fig",
-          "text": "PNG, JPG, and SVG formats in Figma"
-        },
-        {
-          "href": "https://yandex.pdf",
-          "text": "Requirements and Recommendations for the PCI DSS (1.3 MB)"
-        },
-        {
-          "href": "https://yandex.zip",
-          "text": "Archive with other logo and icon formats"
-        },
-        {
-          "href": "https://yandex.doc",
-          "text": "Microsoft Word document"
-        },
-        {
-          "href": "https://yandex.ppt",
-          "text": "PPR"
-        }
-      ]
+      }
     }
   },
   "default": {

src/blocks/Header/Header.scss

@@ -25,7 +25,7 @@ $backgroundWidth: 1440px;
         &_theme_dark {
             #{$block}__title,
             #{$block}__description .yfm,
-            #{$block}__description .yfm > * {
+            #{$block}__description .yfm * {
                 color: var(--yc-color-text-light-primary);
             }
         }
@@ -152,6 +152,16 @@ $backgroundWidth: 1440px;
             & > div {
                 max-width: none;
             }
+
+            #{$block}__background-media {
+                height: 100%;
+            }
+
+            video {
+                height: 100%;
+                width: 100%;
+                object-fit: cover;
+            }
         }
     }
 

src/blocks/Header/Header.tsx

@@ -27,6 +27,7 @@ const Background = ({background}: BackgroundProps) => {
     return headerHasMediaBackground(background) ? (
         <BackgroundMedia
             {...background}
+            mediaClassName={b('background-media')}
             className={b('background', {media: true, 'full-width-media': fullWidthMedia})}
         />
     ) : (

src/blocks/Header/__stories__/data.json

@@ -9,7 +9,7 @@
       "verticalOffset": "m",
       "type": "header-block",
       "title": "Yandex Cloud Professionals partner program",
-      "description": "<p>Sell Yandex Cloud services and get a monthly partner bonus ranging from 12% to 20% of your customers' spending on the services. Get grants to try out Yandex Cloud services or implement your customers' pilot projects.</p> ",
+      "description": "<p>Marketplace is awailable now in Managed Service for Kubernetes<sup>®</sup> management console.</p>",
       "width": "s",
       "buttons": [
         {

src/blocks/HeaderSlider/__stories__/data.json

@@ -41,6 +41,24 @@
             }
           ]
         },
+        {
+          "title": "Yandex Cloud Professionals Partner Program",
+          "description": "Sell Yandex.Cloud services and receive a monthly partner premium from 12% to 20% of your customers' consumption. Get grants to get acquainted with Yandex.Cloud services or to conduct pilot projects for your clients.",
+          "width": "s",
+          "background": {
+            "fullWidthMedia": true,
+            "fullWidth": true,
+            "disableCompress": true,
+            "height": 800,
+            "color": "lightgreen",
+            "image": "https://storage.cloud-preprod.yandex.net/aeksandla-test/img-scale.png",
+            "video": {
+              "src": [
+                "https://storage.yandexcloud.net/cloud-www-assets/scale/2022/main/scale_header.mp4"
+              ]
+            }
+          }
+        },
         {
           "title": "Yandex Scale",
           "overtitle": "September 24",

src/components/BackgroundMedia/BackgroundMedia.tsx

@@ -12,6 +12,7 @@ const b = block('BackgroundMedia');
 
 export interface FullProps extends MediaProps, Animatable {
     className?: string;
+    mediaClassName?: string;
 }
 
 const BackgroundMedia = ({
@@ -20,6 +21,7 @@ const BackgroundMedia = ({
     animated,
     parallax = true,
     video,
+    mediaClassName,
     ...props
 }: FullProps) => {
     const isMobile = useContext(MobileContext);
@@ -31,7 +33,7 @@ const BackgroundMedia = ({
             animate={animated}
         >
             <Media
-                className={b('media')}
+                className={b('media', mediaClassName)}
                 imageClassName={b('image')}
                 videoClassName={b('video')}
                 isBackground={true}

src/containers/PageConstructor/PageConstructor.tsx

@@ -28,6 +28,8 @@ import {ConstructorFootnotes} from './components/ConstructorFootnotes';
 import {ConstructorHeader} from './components/ConstructorItem';
 import {ConstructorBlocks} from './components/ConstructorBlocks';
 
+import '@doc-tools/transform/dist/js/yfm';
+
 import './PageConstructor.scss';
 
 const b = cnBlock('page-constructor');

src/grid/utils.ts

@@ -72,7 +72,6 @@ export function getColClass(params: GridColumnClassParams) {
     } = params;
     return [
         GridColumnClassPrefix.Col,
-        className,
         alignSelf,
         justifyContent && getJustifyClass(justifyContent),
         sizes && getSizeClass(sizes),
@@ -81,6 +80,7 @@ export function getColClass(params: GridColumnClassParams) {
         hidden && getVisibilityClasses(hidden, GridColumnVisibilityClass.None),
         visible && getVisibilityClasses(visible, GridColumnVisibilityClass.Block),
         reset && getResetClass(),
+        className,
     ]
         .filter(Boolean)
         .join(' ');