fix font weight (#642)

Lakate · web-flow · commit e4f48efe402b · 2023-10-18T13:06:24.000+02:00
* feat: add var font-weight

* feat(Header): add fit view for media
diff --git a/src/blocks/Header/Header.scss b/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 {
diff --git a/src/blocks/Header/Header.tsx b/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} />}
diff --git a/src/blocks/Header/__stories__/Header.mdx b/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
diff --git a/src/blocks/Header/__stories__/Header.stories.tsx b/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;
diff --git a/src/blocks/Header/__stories__/data.json b/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}}"
   }
diff --git a/src/blocks/Header/schema.ts b/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'],
diff --git a/src/components/Table/Table.scss b/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);
diff --git a/src/models/constructor-items/blocks.ts b/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';
diff --git a/src/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.scss b/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);
diff --git a/styles/yfm.scss b/styles/yfm.scss
@@ -49,7 +49,7 @@
         }
 
         p strong {
-            font-weight: 500;
+            font-weight: var(--g-text-accent-font-weight);
         }
 
         &_size_s {

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ $block: '.#{$ns}price-description';`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`&__main-title {`
`26`		`- font-weight: 500;`
	`26`	`+ font-weight: var(--g-text-accent-font-weight);`
`27`	`27`
`28`	`28`	`&_color_cornflower {`
`29`	`29`	`color: var(--g-color-base-brand);`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`p strong {`
`52`		`- font-weight: 500;`
	`52`	`+ font-weight: var(--g-text-accent-font-weight);`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`&_size_s {`