fix font weight (#642)

* feat: add var font-weight

* feat(Header): add fit view for media

src/blocks/Header/Header.scss

@@ -193,6 +193,21 @@ $backgroundWidth: 1440px;
         }
     }
 
+    &_media-view_fit {
+        #{$block}__video > video,
+        #{$block}__image {
+            object-fit: contain;
+            height: auto;
+            width: auto;
+            max-height: 100%;
+            max-width: 100%;
+            position: relative;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
     @media (max-width: $backgroundWidth) {
         &__background,
         &__background#{$block}__background_media {

src/blocks/Header/Header.tsx

@@ -78,6 +78,7 @@ export const HeaderBlock = (props: WithChildren<HeaderBlockFullProps>) => {
         breadcrumbs,
         status,
         children,
+        mediaView = 'full',
     } = props;
     const isMobile = useContext(MobileContext);
     const theme = useTheme();
@@ -97,7 +98,14 @@ export const HeaderBlock = (props: WithChildren<HeaderBlockFullProps>) => {
 
     return (
         <header
-            className={b({['has-media']: hasRightSideImage, ['full-width']: fullWidth}, className)}
+            className={b(
+                {
+                    ['has-media']: hasRightSideImage,
+                    ['full-width']: fullWidth,
+                    ['media-view']: mediaView,
+                },
+                className,
+            )}
         >
             {backgroundThemed && fullWidth && <FullWidthBackground background={backgroundThemed} />}
             {backgroundThemed && <Background background={backgroundThemed} isMobile={isMobile} />}

src/blocks/Header/__stories__/Header.mdx

@@ -46,3 +46,5 @@ There could be only one one Header block on the page.
 
 `verticalOffset?: 's' | 'm' | 'l' | 'xl'` — Top and bottom offsets from the text. (Values: 's' - 48px, 'm' - 80px, 'l' - 112px, 'xl' - 144px.)
 </StoryTemplate>
+
+`mediaView?: full | fit` — full is default value, the media content covers all widht and height. Fit - media content has real sizes and locates in the middle

src/blocks/Header/__stories__/Header.stories.tsx

@@ -58,6 +58,26 @@ const ImageTemplate: StoryFn<HeaderBlockModel> = (args) => (
     </Fragment>
 );
 
+const FitTemplate: StoryFn<HeaderBlockModel> = (args) => (
+    <Fragment>
+        <DefaultTemplate {...args} title={getImageTitle('«M»')} width="m" />
+        <DefaultTemplate
+            {...args}
+            {...data.imageFit.content}
+            title={getImageTitle('«S»')}
+            width="s"
+        />
+        <DefaultTemplate {...args} {...data.video.content} title={getImageTitle('«S»')} width="s" />
+        <DefaultTemplate
+            {...args}
+            {...data.videoFit.content}
+            title={getImageTitle('«S»')}
+            width="s"
+            description={yfmTransform(data.videoFit.description)}
+        />
+    </Fragment>
+);
+
 const VerticalOffsetTemplate: StoryFn<HeaderBlockModel> = (args) => (
     <Fragment>
         <DefaultTemplate {...args} title={getVerticalOffsetTitle('«S»')} verticalOffset="s" />
@@ -179,6 +199,7 @@ export const FullWithBackground = FullWithBackgroundTemplate.bind({});
 export const FullWidthMediaBackground = FullWidthMediaBackgroundTemplate.bind({});
 export const DarkTheme = DefaultTemplate.bind({});
 export const Breadcrumbs = BreadCrumbsTemplate.bind({});
+export const MediaViewFit = FitTemplate.bind({});
 
 Default.args = {...DefaultArgs} as HeaderBlockProps;
 
@@ -215,3 +236,9 @@ Breadcrumbs.args = {
     ...DefaultArgs,
     ...data.breadcrumbs.content,
 } as HeaderBlockProps;
+
+MediaViewFit.args = {
+    ...DefaultArgs,
+    ...data.image.content,
+    mediaView: 'fit',
+} as HeaderBlockProps;

src/blocks/Header/__stories__/data.json

@@ -136,6 +136,57 @@
       }
     }
   },
+  "imageFit": {
+    "title": "Text size {{text}}",
+    "content": {
+      "width": "s",
+      "image": {
+        "light": {
+          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-img_6-12_light.png"
+        },
+        "dark": {
+          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-img_6-12_dark.png"
+        }
+      }
+    }
+  },
+  "video": {
+    "title": "Text size {{text}}",
+    "content": {
+      "width": "s",
+      "video": {
+        "light": {
+          "src": [
+            "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white_v.mp4"
+          ]
+        },
+        "dark": {
+          "src": [
+            "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white_v.mp4"
+          ]
+        }
+      }
+    }
+  },
+  "videoFit": {
+    "title": "Text size {{text}}",
+    "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. **Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. **Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. **Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    "content": {
+      "width": "s",
+      "video": {
+        "light": {
+          "src": [
+            "https://storage.yandexcloud.net/cloud-www-assets/constructor/main/new/podd-00-13-01.mp4"
+          ]
+        },
+        "dark": {
+          "src": [
+            "https://storage.yandexcloud.net/cloud-www-assets/constructor/main/new/podd-00-13-01.mp4"
+          ]
+        }
+      }
+    }
+  },
   "size": {
     "title": "Header size {{size}}"
   }

src/blocks/Header/schema.ts

@@ -44,6 +44,10 @@ export const HeaderProperties = {
     },
     image: withTheme(ImageProps),
     video: withTheme(VideoProps),
+    mediaView: {
+        type: 'string',
+        enum: ['fit', 'full'],
+    },
     backLink: {
         type: 'object',
         required: ['url', 'title'],

src/components/Table/Table.scss

@@ -17,7 +17,7 @@ $block: '.#{$ns}table';
     &__row {
         display: flex;
         &:first-child {
-            font-weight: 500;
+            font-weight: var(--g-text-accent-font-weight);
 
             #{$root}__cell {
                 border-bottom-color: var(--g-color-line-generic-active);

src/models/constructor-items/blocks.ts

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

src/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.scss

@@ -23,7 +23,7 @@ $block: '.#{$ns}price-description';
     }
 
     &__main-title {
-        font-weight: 500;
+        font-weight: var(--g-text-accent-font-weight);
 
         &_color_cornflower {
             color: var(--g-color-base-brand);

styles/yfm.scss

@@ -49,7 +49,7 @@
         }
 
         p strong {
-            font-weight: 500;
+            font-weight: var(--g-text-accent-font-weight);
         }
 
         &_size_s {