feat(Title): add size xs (#207)

Author: Juli Ovechkina

src/components/BlockHeader/BlockHeader.scss

@@ -11,7 +11,8 @@ $block: '.#{$ns}block-header';
 
         margin-top: $indentXXS;
 
-        &_titleSize_s {
+        &_titleSize_s,
+        &_titleSize_xs {
             margin-top: $indentXXXS;
 
             .yfm {

src/components/BlockHeader/__stories__/BlockHeader.stories.tsx

@@ -28,6 +28,9 @@ const SizesTemplate: Story<BlockHeaderProps & ClassNameProps> = (args) => (
         <div style={{paddingBottom: '64px'}}>
             <BlockHeader {...args} title={data.sizes.s as TitleProps} />
         </div>
+        <div style={{paddingBottom: '64px'}}>
+            <BlockHeader {...args} title={data.sizes.xs as TitleProps} />
+        </div>
     </div>
 );
 

src/components/BlockHeader/__stories__/data.json

@@ -23,6 +23,10 @@
     }
   },
   "sizes": {
+    "xs": {
+      "text": "Size XS",
+      "textSize": "xs"
+    },
     "s": {
       "text": "Size S",
       "textSize": "s"

src/components/Title/Title.scss

@@ -7,9 +7,12 @@ $block: '.#{$ns}title-block';
     @include justify();
     $root: &;
 
+    &_size_xs {
+        @include heading5();
+    }
+
     &_size_s {
         @include heading4();
-
         margin-top: $indentM;
     }
 
@@ -24,10 +27,14 @@ $block: '.#{$ns}title-block';
     }
 
     &__arrow {
-        margin: 8px 0 0 4px;
+        margin-top: 10px;
+
+        &_size_xs {
+            margin-top: 7px;
+        }
 
         &_size_s {
-            margin: 4px 0 0 4px;
+            margin-top: 5px;
         }
     }
 
@@ -41,7 +48,11 @@ $block: '.#{$ns}title-block';
             cursor: pointer;
 
             #{$root}__arrow {
-                margin-left: 12px;
+                margin-left: 10px;
+
+                &_size_xs {
+                    margin-left: 6px;
+                }
 
                 &_size_s {
                     margin-left: 8px;
@@ -66,8 +77,15 @@ $block: '.#{$ns}title-block';
     }
 
     @media (max-width: map-get($gridBreakpoints, 'sm')) {
-        &_size_l {
+        &_size_l:not(#{$root}_reset-margin) {
             margin-top: $indentL;
         }
+
+        &__arrow {
+            &_size_m,
+            &_size_l {
+                margin-top: 9px;
+            }
+        }
     }
 }

src/components/Title/Title.tsx

@@ -13,12 +13,14 @@ const b = block('title-block');
 
 export function getArrowSize(size: TextSize, isMobile: boolean) {
     switch (size) {
+        case 'xs':
+            return 13;
         case 's':
             return 16;
         case 'm':
-            return isMobile ? 20 : 24;
+            return isMobile ? 22 : 24;
         case 'l':
-            return isMobile ? 20 : 24;
+            return isMobile ? 26 : 38;
         default:
             return 20;
     }

src/components/Title/__stories__/Title.stories.tsx

@@ -1,5 +1,5 @@
 import {Meta, Story} from '@storybook/react/types-6-0';
-import React from 'react';
+import React, {Fragment} from 'react';
 
 import Title, {TitleFullProps} from '../Title';
 import {COMPONENTS} from '../../../demo/constants';
@@ -14,10 +14,21 @@ export default {
 
 const DefaultTemplate: Story<TitleFullProps> = (args) => <Title {...args} />;
 
+const SizeTemplate: Story<TitleFullProps> = (args) => (
+    <Fragment>
+        <Title {...args} textSize="xs" />
+        <Title {...args} textSize="s" />
+        <Title {...args} textSize="m" />
+        <Title {...args} textSize="l" resetMargin={true} />
+    </Fragment>
+);
+
 export const Default = DefaultTemplate.bind({});
-export const WithLink = DefaultTemplate.bind({});
+export const WithLink = SizeTemplate.bind({});
 export const ResetMargin = DefaultTemplate.bind({});
+export const Size = SizeTemplate.bind({});
 
 Default.args = data.default.content as TitleProps;
 WithLink.args = data.withLink.content as TitleProps;
 ResetMargin.args = data.resetMargin.content as TitleProps;
+Size.args = data.default.content as TitleProps;

src/models/constructor-items/common.ts

@@ -50,7 +50,7 @@ export enum MediaVideoControlsType {
 
 // types
 export type TextTheme = 'light' | 'dark';
-export type TextSize = 's' | 'm' | 'l';
+export type TextSize = 'xs' | 's' | 'm' | 'l';
 export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 export type HeaderWidth = 's' | 'm' | 'l';
 export type HeaderImageSize = 's' | 'm';

src/utils/blocks.ts

@@ -8,6 +8,8 @@ export function getHeaderTag(size: TextSize) {
             return 'h1';
         case 's':
             return 'h4';
+        case 'xs':
+            return 'h5';
         case 'm':
         default:
             return 'h2';

styles/mixins.scss

@@ -141,15 +141,17 @@
 }
 
 @mixin label($size: m) {
-    @include text-size(body-1);
+    @if $size == m {
+        @include text-size(body-1);
 
-    $label-height: 20px;
+        $label-height: 20px;
 
-    display: inline-block;
-    padding: 0 8px;
-    border-radius: 2px;
-    height: $label-height;
-    line-height: $label-height;
+        display: inline-block;
+        padding: 0 8px;
+        border-radius: 2px;
+        height: $label-height;
+        line-height: $label-height;
+    }
 
     @if $size == s {
         @include text-size(caption-2);