feat: redesign articles list

.eslintrc.js

@@ -66,6 +66,7 @@ module.exports = {
           'feature',
           'variant',
           'size',
+          'wrap',
         ],
       },
     ],

json-server/db.json

@@ -792,7 +792,7 @@
         "isCounterEnabled": true
       },
       "jsonSettings": {
-        "theme": "app_dark_theme",
+        "theme": "app_orange_theme",
         "isFirstVisit": true,
         "settingsPageHasBeenOpen": false,
         "isArticlesPageWasOpened": true

src/app/styles/index.scss

@@ -9,16 +9,16 @@ body {
   color: var(--primary-color);
 }
 
-body.redesigned {
-  font: var(--font-m-redesigned);
-  color: var(--text-redesigned);
-}
-
 * {
   scrollbar-color: var(--card-bg) var(--inverted-primary-color);
   scrollbar-width: 10px;
 }
 
+body.redesigned {
+  font: var(--font-m-redesigned);
+  color: var(--text-redesigned);
+}
+
 .app {
   background: var(--bg-color);
   min-height: 100vh;

src/entities/Article/ui/ArticleList/ArticleList.module.scss

@@ -1,13 +1,10 @@
+.articleList {
+  margin-top: 30px;
+}
+
 .SMALL {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 30px;
-
-  .row {
-    margin-top: 30px;
-    display: flex;
-    justify-content: center;
-    gap: 30px;
-  }
 }

src/entities/Article/ui/ArticleList/ArticleList.tsx

@@ -1,8 +1,11 @@
 import { HTMLAttributeAnchorTarget, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Text, TextSize } from '@/shared/ui/deprecated/Text';
+import { Text as TextDeprecated, TextSize } from '@/shared/ui/deprecated/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames';
+import { ToggleFeatures } from '@/shared/lib/features';
+import { HStack } from '@/shared/ui/redesigned/Stack';
 
 import { ArticleListItemSkeleton } from '../ArticleListItem/ArticleListItemSkeleton';
 import { ArticleListItem } from '../ArticleListItem/ArticleListItem';
@@ -29,29 +32,65 @@ export const ArticleList = memo((props: ArticleListProps) => {
 
   if (!isLoading && !articles.length) {
     return (
-      <div className={classNames(cls.articleList, {}, [className, cls[view]])}>
-        <Text size={TextSize.L} title={t('Статьи не найдены')} />
-      </div>
+      <ToggleFeatures
+        feature="isAppRedesigned"
+        on={
+          <div className={classNames(cls.articleListRedesigned, {}, [className, cls[view]])}>
+            <Text size="l" title={t('Статьи не найдены')} />
+          </div>
+        }
+        off={
+          <div className={classNames(cls.articleList, {}, [className, cls[view]])}>
+            <TextDeprecated size={TextSize.L} title={t('Статьи не найдены')} />
+          </div>
+        }
+      />
     );
   }
 
   return (
-    <div
-      data-testid="ArticleList"
-      className={classNames(cls.articleList, {}, [className, cls[view]])}
-    >
-      {articles.map((item) => (
-        <ArticleListItem
-          article={item}
-          view={view}
-          target={target}
-          key={item.id}
-          className={cls.card}
-        />
-      ))}
-
-      {isLoading && getSkeletons(view)}
-    </div>
+    <ToggleFeatures
+      feature="isAppRedesigned"
+      on={
+        <HStack
+          wrap="wrap"
+          justify="center"
+          gap="24"
+          data-testid="ArticleList"
+          className={classNames(cls.articleListRedesigned, {}, [className])}
+        >
+          {articles.map((item) => (
+            <ArticleListItem
+              article={item}
+              view={view}
+              target={target}
+              key={item.id}
+              className={cls.card}
+            />
+          ))}
+
+          {isLoading && getSkeletons(view)}
+        </HStack>
+      }
+      off={
+        <div
+          data-testid="ArticleList"
+          className={classNames(cls.articleList, {}, [className, cls[view]])}
+        >
+          {articles.map((item) => (
+            <ArticleListItem
+              article={item}
+              view={view}
+              target={target}
+              key={item.id}
+              className={cls.card}
+            />
+          ))}
+
+          {isLoading && getSkeletons(view)}
+        </div>
+      }
+    />
   );
 });
 

src/entities/Article/ui/ArticleListItem/ArticleListItemDeprecated/ArticleListItemDeprecated.module.scss

@@ -1,4 +1,6 @@
 .BIG {
+  margin-bottom: 30px;
+
   .views {
     margin-left: auto;
   }
@@ -39,9 +41,11 @@
 }
 
 .SMALL {
-  width: 230px;
-  transition: 0.2s;
-  cursor: pointer;
+  .card {
+    width: 230px;
+    transition: 0.2s;
+    cursor: pointer;
+  }
 
   .date {
     position: absolute;

src/entities/Article/ui/ArticleListItem/ArticleListItemDeprecated/ArticleListItemDeprecated.stories.tsx

@@ -1,18 +1,20 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { ArticleView } from '../../model/consts/consts';
-import { article } from '../../mocks/data';
-import { ArticleListItem } from './ArticleListItemDeprecated';
+import { ArticleView } from '../../../model/consts/consts';
+import { article } from '../../../mocks/data';
+import { ArticleListItemDeprecated } from './ArticleListItemDeprecated';
 
 export default {
-  title: 'entities/Article/ArticleListItemRedesigned',
-  component: ArticleListItem,
+  title: 'entities/Article/ArticleListItemDeprecated',
+  component: ArticleListItemDeprecated,
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-} as ComponentMeta<typeof ArticleListItem>;
+} as ComponentMeta<typeof ArticleListItemDeprecated>;
 
-const Template: ComponentStory<typeof ArticleListItem> = (args) => <ArticleListItem {...args} />;
+const Template: ComponentStory<typeof ArticleListItemDeprecated> = (args) => (
+  <ArticleListItemDeprecated {...args} />
+);
 
 export const NormalSmall = Template.bind({});
 NormalSmall.args = {

src/entities/Article/ui/ArticleListItem/ArticleListItemDeprecated/ArticleListItemDeprecated.tsx

@@ -45,7 +45,7 @@ export const ArticleListItemDeprecated = memo((props: ArticleListItemProps) => {
 
     return (
       <div
-        data-testid="ArticleListItemRedesigned"
+        data-testid="ArticleListItem"
         className={classNames(cls.articleListItem, {}, [className, cls[view]])}
       >
         <Card className={cls.card}>
@@ -79,7 +79,7 @@ export const ArticleListItemDeprecated = memo((props: ArticleListItemProps) => {
 
   return (
     <AppLink
-      data-testid="ArticleListItemRedesigned"
+      data-testid="ArticleListItem"
       target={target}
       to={getRouteArticlesDetails(article.id)}
       className={classNames(cls.articleListItem, {}, [className, cls[view]])}

src/entities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.module.scss

@@ -14,57 +14,28 @@
 }
 
 .SMALL {
-  width: 230px;
-  transition: 0.2s;
-  cursor: pointer;
-
-  &:hover {
-    opacity: 0.8;
-    transform: scale(1.01);
-
-    .date {
-      display: block;
-    }
-  }
-
-  .imageWrapper {
-    width: 200px;
-    height: 200px;
-    position: relative;
+  .card {
+    width: 240px;
+    height: 350px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
   }
 
   .img {
-    width: 200px;
-    height: 200px;
+    width: 100%;
     object-fit: cover;
+    height: 140px;
   }
 
-  .infoWrapper {
-    display: flex;
-    align-items: center;
-    margin-top: 8px;
-  }
-
-  .types p {
-    width: 115px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .info {
+    padding: 8px 8px 16px;
+    height: 100%;
   }
 
-  .views {
-    margin-left: auto;
-    margin-right: 8px;
-  }
-
-  .title {
-    margin-top: 8px;
-
-    p {
-      width: 200px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+  .footer {
+    height: 100%;
+    justify-content: flex-end;
   }
 }

src/entities/Article/ui/ArticleListItem/ArticleListItemRedesigned/ArticleListItemRedesigned.tsx

@@ -30,6 +30,13 @@ export const ArticleListItemRedesigned = memo((props: ArticleListItemProps) => {
 
   const { t } = useTranslation('articles');
 
+  const userInfo = (
+    <>
+      <Avatar size={30} src={article.user.avatar} alt={article.user.username} />
+      <Text bold text={article.user.username} />
+    </>
+  );
+
   const views = (
     <HStack gap="8">
       <Icon Svg={EyeIcon} />
@@ -47,12 +54,12 @@ export const ArticleListItemRedesigned = memo((props: ArticleListItemProps) => {
         padding="24"
         fullwidth
         className={classNames(cls.articleListItem, {}, [className, cls[view]])}
-        data-testid="ArticleListItemRedesigned"
+        data-testid="ArticleListItem"
       >
         <VStack max gap="16">
           <HStack max gap="8">
-            <Avatar size={30} src={article.user.avatar} alt={article.user.username} />
-            <Text bold text={article.user.username} />
+            {userInfo}
+
             <Text text={article.createdAt} />
           </HStack>
 
@@ -82,29 +89,32 @@ export const ArticleListItemRedesigned = memo((props: ArticleListItemProps) => {
 
   return (
     <AppLink
-      data-testid="ArticleListItemRedesigned"
+      data-testid="ArticleListItem"
       target={target}
       to={getRouteArticlesDetails(article.id)}
       className={classNames(cls.articleListItem, {}, [className, cls[view]])}
     >
-      <Card className={cls.card}>
-        <div className={cls.imageWrapper}>
-          <AppImage
-            fallback={<Skeleton width={200} height={200} />}
-            className={cls.img}
-            src={article.img}
-            alt={article.title}
-          />
-
-          <Text text={article.createdAt} />
-        </div>
-
-        <div className={cls.infoWrapper}>
-          {/* {types} */}
-          {views}
-        </div>
-
-        <Text className={cls.title} text={article.title} />
+      <Card padding="0" className={cls.card} borderRadius="round">
+        <AppImage
+          fallback={<Skeleton width={200} height={200} />}
+          className={cls.img}
+          src={article.img}
+          alt={article.title}
+        />
+
+        <VStack className={cls.info} gap="4">
+          <Text className={cls.title} text={article.title} />
+
+          <VStack gap="4" className={cls.footer} max>
+            <HStack justify="between" max>
+              <Text text={article.createdAt} className={cls.date} />
+
+              {views}
+            </HStack>
+
+            <HStack gap="4">{userInfo}</HStack>
+          </VStack>
+        </VStack>
       </Card>
     </AppLink>
   );