feat: content list update (#1090)

* feat: max-width for content-list component

* feat: update content-list without title

---------

Co-authored-by: gravity-ui-bot <[email protected]>

src/blocks/Map/__tests__/Map.visual.test.tsx

@@ -4,28 +4,30 @@ import {test} from '../../../../playwright/core/index';
 
 import {Default, Direction, MapsTypes, Size} from './helpers';
 
+const DEFAULT_MAP_DELAY = 10 * 1000;
+
 test.describe('Map', () => {
-    test('render stories <Default>', async ({mount, expectScreenshot, page}) => {
+    test('render stories <Default>', async ({mount, expectScreenshot, delay, page}) => {
         await mount(<Default />);
-
+        await delay(DEFAULT_MAP_DELAY);
         await expectScreenshot({skipTheme: 'dark', mask: [page.locator('.pc-map')]});
     });
 
-    test('render stories <Size>', async ({mount, expectScreenshot, page}) => {
+    test('render stories <Size>', async ({mount, expectScreenshot, delay, page}) => {
         await mount(<Size />);
-
+        await delay(DEFAULT_MAP_DELAY);
         await expectScreenshot({skipTheme: 'dark', mask: [page.locator('.pc-map')]});
     });
 
-    test('render stories <Direction>', async ({mount, expectScreenshot, page}) => {
+    test('render stories <Direction>', async ({mount, expectScreenshot, delay, page}) => {
         await mount(<Direction />);
-
+        await delay(DEFAULT_MAP_DELAY);
         await expectScreenshot({skipTheme: 'dark', mask: [page.locator('.pc-map')]});
     });
 
-    test('render stories <MapsTypes>', async ({mount, expectScreenshot, page}) => {
+    test('render stories <MapsTypes>', async ({mount, expectScreenshot, delay, page}) => {
         await mount(<MapsTypes />);
-
+        await delay(DEFAULT_MAP_DELAY);
         await expectScreenshot({skipTheme: 'dark', mask: [page.locator('.pc-map')]});
     });
 });

src/components/ContentList/ContentList.scss

@@ -7,9 +7,13 @@ $iconSizeS: 20px;
 $iconSizeXS: 18px;
 $marginIconSizeS: 2px;
 $marginIconSizeL: 1px;
+$marginIconWithoutTitleSizeS: 1px;
+$marginIconWithoutTitleSizeL: 2px;
 $lightPrimary: var(--g-color-text-light-primary);
 $darkPrimary: var(--g-color-text-dark-primary);
 $darkSecondary: var(--g-color-text-dark-secondary);
+$maxSizeL: 480px;
+$maxSizeS: 440px;
 
 @mixin content-link($baseColor: $primary, $hoverColor: $secondary) {
     color: $baseColor;
@@ -21,6 +25,8 @@ $darkSecondary: var(--g-color-text-dark-secondary);
 
 #{$block} {
     &_size_l {
+        max-width: $maxSizeL;
+
         #{$block}__title {
             @include text-size(header-1);
 
@@ -48,15 +54,21 @@ $darkSecondary: var(--g-color-text-dark-secondary);
                 #{$block}__icon {
                     width: $iconSizeS;
                     height: $iconSizeS;
-                    margin-top: 0;
-                    margin-bottom: 0;
+                    margin-top: $marginIconWithoutTitleSizeL;
+                    margin-bottom: $marginIconWithoutTitleSizeL;
                     margin-right: $indentXXXS;
                 }
+
+                #{$block}__text {
+                    @include text-size(subheader-3);
+                }
             }
         }
     }
 
     &_size_s {
+        max-width: $maxSizeS;
+
         #{$block}__title {
             @include text-size(subheader-3);
 
@@ -88,8 +100,12 @@ $darkSecondary: var(--g-color-text-dark-secondary);
                 #{$block}__icon {
                     width: $iconSizeXS;
                     height: $iconSizeXS;
-                    margin-top: 0;
-                    margin-bottom: 0;
+                    margin-top: $marginIconWithoutTitleSizeS;
+                    margin-bottom: $marginIconWithoutTitleSizeS;
+                }
+
+                #{$block}__text {
+                    @include text-size(subheader-2);
                 }
             }
         }

src/sub-blocks/PriceCard/PriceCard.tsx

@@ -50,7 +50,7 @@ const PriceCard = (props: PriceCardProps) => {
                                         icon: Check,
                                         text: item,
                                     }))}
-                                    size="l"
+                                    size="s"
                                 />
                             </div>
                         ) : null}