Merge pull request #179 from Studio-Yandex-Practicum/enhancement-149-…

…change-BrandBlock-according-to-fsd

 #149 Переделка компонента Бренды по fsd

src/entities/BrandCard/BrandCard.module.scss

@@ -0,0 +1,57 @@
+@use '../../shared/styles/utils/variables' as color;
+@use '../../shared/styles/utils/mixins' as media;
+
+.brand {
+  width: 240px;
+  height: 220px;
+  padding: 0 10px;
+  display: block;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  @include media.respond-to('large') {
+    min-width: 230px;
+    width: 100%;
+    height: 230px;
+  }
+
+  @include media.respond-to('small') {
+    min-width: 148px;
+    width: 100%;
+    height: 148px;
+  }
+
+}
+
+.wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid color.$border-color;
+  transition: border-color 0.25s;
+
+  &:hover {
+    border-color: color.$theme-primary-color;
+  }
+}
+
+.link {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.img {
+  display: block;
+
+  @include media.respond-to('small') {
+    width: 120px;
+    height: 120px;
+  }
+}

src/entities/BrandCard/BrandCard.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import BrandCard from './BrandCard'
+import Brand1 from '@/assets/images/brands/1-150x150.webp'
+
+const meta = {
+  title: 'entities/BrandBlock',
+  component: BrandCard,
+  parameters: {
+    layout: 'centered'
+  }
+} as Meta<typeof BrandCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    card: {
+      id: 1,
+      name: 'UGG',
+      slug: 'ugg',
+      image: Brand1,
+      is_prohibited: false,
+      is_visible_on_main: true
+    }
+  }
+}

src/entities/BrandCard/BrandCard.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react'
+import { Routes } from '@/shared/config/routerConfig/routes'
+import { TBrand } from '@/models/BrandModel'
+import Link from '@/shared/ui/Link/Link'
+import Img from '@/ui/img'
+import BrandWithoutImage from '@/assets/images/brands/brand-without-image.webp'
+import {
+  DEFAULT_WIDTH_FOR_BRANDCARD_IMG,
+  DEFAULT_HEIGHT_FOR_BRANDCARD_IMG
+} from '@/entities/constants/constants'
+import styles from './BrandCard.module.scss'
+
+interface BrandCardProps {
+  card: TBrand
+}
+
+/**
+ * Компонент карточки бренда. Заполнение карточки происходит с применением метода map
+ * @param {TBrand} card - массив для наполнения карточки бренда;
+ */
+
+const BrandCard: FC<BrandCardProps> = ({ card }) => {
+  return (
+    <li className={styles.brand}>
+      <div className={styles.wrap}>
+        <Link className={styles.link} to={`${Routes.BRANDS}/${card.slug}`}>
+          <Img
+            src={card.image || BrandWithoutImage}
+            alt={card.name}
+            width={card.width ?? DEFAULT_WIDTH_FOR_BRANDCARD_IMG}
+            height={card.height ?? DEFAULT_HEIGHT_FOR_BRANDCARD_IMG}
+            className={styles.img}
+          />
+        </Link>
+      </div>
+    </li>
+  )
+}
+
+export default BrandCard

src/entities/constants/constants.tsx

@@ -0,0 +1,2 @@
+export const DEFAULT_WIDTH_FOR_BRANDCARD_IMG: number = 150
+export const DEFAULT_HEIGHT_FOR_BRANDCARD_IMG: number = 150

src/mockData/brandData.ts

@@ -1,39 +1,57 @@
 import Brand1 from '@/assets/images/brands/1-150x150.webp'
 import Brand2 from '@/assets/images/brands/10-150x150.webp'
-import Brand3 from '@/assets/images/brands/3-150x150.webp'
-import Brand4 from '@/assets/images/brands/4-150x150.webp'
-import Brand5 from '@/assets/images/brands/6-150x150.webp'
+import Brand3 from '@/assets/images/brands/4-150x150.webp'
+import Brand4 from '@/assets/images/brands/6-150x150.webp'
+import Brand5 from '@/assets/images/brands/3-150x150.webp'
 import Brand6 from '@/assets/images/brands/9-150x150.webp'
 
 export const brandsData = [
   {
     id: 1,
-    src: Brand1,
-    alt: 'Изображение бренда'
+    name: 'UGG',
+    slug: 'ugg',
+    image: Brand1,
+    is_prohibited: false,
+    is_visible_on_main: true
   },
   {
     id: 2,
-    src: Brand2,
-    alt: 'Изображение бренда'
+    name: 'pols potten',
+    slug: 'pols-potten',
+    image: Brand2,
+    is_prohibited: false,
+    is_visible_on_main: true
   },
   {
     id: 3,
-    src: Brand3,
-    alt: 'Изображение бренда'
+    name: 'Kartell',
+    slug: 'kartell',
+    image: Brand3,
+    is_prohibited: false,
+    is_visible_on_main: true
   },
   {
     id: 4,
-    src: Brand4,
-    alt: 'Изображение бренда'
+    name: 'Tom Dixon.',
+    slug: 'tom-dixon',
+    image: Brand4,
+    is_prohibited: false,
+    is_visible_on_main: true
   },
   {
     id: 5,
-    src: Brand5,
-    alt: 'Изображение бренда'
+    name: 'MISSIONI HOME',
+    slug: 'missioni-home',
+    image: Brand5,
+    is_prohibited: false,
+    is_visible_on_main: true
   },
   {
     id: 6,
-    src: Brand6,
-    alt: 'Изображение бренда'
+    name: 'LSA International',
+    slug: 'lsa-international',
+    image: Brand6,
+    is_prohibited: false,
+    is_visible_on_main: true
   }
 ]

src/models/BrandModel.ts

@@ -1,7 +1,10 @@
 export type TBrand = {
   id: number
-  src: string
-  alt: string
+  name: string
+  slug: string
+  image: string
+  is_prohibited: boolean
+  is_visible_on_main: boolean
   width?: number
   height?: number
 }

src/pages/MainPage/MainPage.tsx

@@ -1,12 +1,11 @@
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
 import ContainerCards from '@/components/ContainerCards/ContainerCards'
 import SliderBlock from '@/components/SliderBlock/SliderBlock'
-import BrandsBlock from '@/components/BrandBlock/BrandBlock'
+import BrandsBlock from '@/widgets/BrandBlock/BrandBlock'
 import { storiesData } from '@/mockData/storiesData'
 import { blogData } from '@/mockData/blogData'
 import { newsData } from '@/mockData/newsData'
 import { reviewsData } from '@/mockData/reviews.Data'
-import { brandsData } from '@/mockData/brandData'
 import {
   TEXT_STORIES,
   TEXT_BLOG,
@@ -32,7 +31,7 @@ const MainPage = () => {
         <ContainerCards title={TEXT_NEWS} linkText={LINK_NEWS_ALL} cards={newsData} />
         <CategoryGrid />
         <ReviewsBlock title={TEXT_CUSTOMERS_ABOUT_US} linkText={LINK_REVIEWS_ALL} reviews={reviewsData} />
-        <BrandsBlock title={'Наши бренды'} linkText={'Все бренды'} cards={brandsData} />
+        <BrandsBlock />
         <Advantages />
         <ArticleBlock />
       </WrapperForMainContent>

src/shared/config/routerConfig/routes.ts

@@ -12,5 +12,6 @@ export enum Routes {
   CATEGORIES = '/categories',
   COMPARE = '/compare',
   FAVORITES = '/favorites',
-  LOGIN = '/login'
+  LOGIN = '/login',
+  BRANDS = '/brands'
 }

src/shared/constants/constants.ts

@@ -4,6 +4,7 @@ export const TEXT_NEWS: string = 'Новости'
 export const TEXT_POPULAR_CATEGORIES: string = 'Популярные категории'
 export const TEXT_CUSTOMERS_ABOUT_US: string = 'Наши клиенты о нас'
 export const TEXT_OUR_BRANDS: string = 'Наши бренды'
+export const TEXT_ALL_BRANDS: string = 'Все бренды'
 
 export const SEARCH_CATEGORY: string = 'category'
 export const SEARCH_PRODUCT: string = 'product'

src/components/BrandBlock/brand.module.scss → src/widgets/BrandBlock/BrandBlock.module.scss

@@ -61,44 +61,3 @@
     }
   }
 }
-
-.brands_card {
-  width: 240px;
-  height: 220px;
-  padding: 0 10px;
-
-  @include media.respond-to('large') {
-    min-width: 230px;
-    width: 100%;
-    height: 230px;
-  }
-
-  @include media.respond-to('small') {
-    min-width: 148px;
-    width: 100%;
-    height: 148px;
-  }
-}
-
-.wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid color.$border-color;
-  transition: border-color 0.25s;
-
-  &:hover {
-    border-color: color.$theme-primary-color;
-  }
-}
-
-.img {
-  display: block;
-
-  @include media.respond-to('small') {
-    width: 120px;
-    height: 120px;
-  }
-}

src/widgets/BrandBlock/BrandBlock.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import BrandBlock from './BrandBlock'
+import { brandsData } from '@/mockData/brandData'
+
+const meta = {
+  title: 'widgets/BrandBlock',
+  component: BrandBlock,
+  parameters: {
+    layout: 'centered'
+  }
+} as Meta<typeof BrandBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    card: brandsData
+  }
+}