From e32cda2bbf149f837b45942f94a9a76b9025146c Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Fri, 26 Jan 2024 14:59:51 +0300 Subject: [PATCH] #199-enhancement-changed-BlogBlock-to-fsd --- src/entities/BlogCard/BlogCard.module.scss | 36 ++++++++++ src/entities/BlogCard/BlogCard.stories.tsx | 27 ++++++++ src/entities/BlogCard/BlogCard.tsx | 28 ++++++++ src/entities/NewsCard/NewsCard.module.scss | 10 ++- src/entities/NewsCard/NewsCard.tsx | 5 +- src/pages/MainPage/MainPage.tsx | 12 +--- .../BlogBlock/ui/BlogBlock.module.scss | 65 +++++++++++++++++++ .../BlogBlock/ui/BlogBlock.stories.tsx | 26 ++++++++ src/widgets/BlogBlock/ui/BlogBlock.tsx | 33 ++++++++++ 9 files changed, 226 insertions(+), 16 deletions(-) create mode 100644 src/entities/BlogCard/BlogCard.module.scss create mode 100644 src/entities/BlogCard/BlogCard.stories.tsx create mode 100644 src/entities/BlogCard/BlogCard.tsx create mode 100644 src/widgets/BlogBlock/ui/BlogBlock.module.scss create mode 100644 src/widgets/BlogBlock/ui/BlogBlock.stories.tsx create mode 100644 src/widgets/BlogBlock/ui/BlogBlock.tsx diff --git a/src/entities/BlogCard/BlogCard.module.scss b/src/entities/BlogCard/BlogCard.module.scss new file mode 100644 index 00000000..5ee6b802 --- /dev/null +++ b/src/entities/BlogCard/BlogCard.module.scss @@ -0,0 +1,36 @@ +@use '@/app/styles/index' as var; + +.card { + min-width: 340px; + position: relative; + transition: transform 0.3s ease-in-out; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 15px; + + &:hover { + transform: scale(1.1, 1.05); + transition: transform 0.3s ease-in-out; + } + + img { + border-radius: 6px; + transition: transform 0.3s ease-in-out; + scroll-snap-align: start; + } + + .heading + { + font-size: #{'min(max(14px, 1.2vw), 16px)'}; + } + + &:hover .heading { + color: var.$link-color; + } + + span { + color: var.$body-color-light-grey; + } + +} \ No newline at end of file diff --git a/src/entities/BlogCard/BlogCard.stories.tsx b/src/entities/BlogCard/BlogCard.stories.tsx new file mode 100644 index 00000000..52f4421e --- /dev/null +++ b/src/entities/BlogCard/BlogCard.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react' +import BlogCard from './BlogCard' +import Img1 from '@/assets/images/blog/img-blog-01.png' + +const meta = { + title: 'entities/BlogCard', + component: BlogCard, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'] +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + card: { + id: 1, + src: Img1, + alt: 'Покупай и не жди. До -50% на весь электротранспорт!', + title: 'Покупай и не жди. До -50% на весь электротранспорт!', + date: '8 Мая, 2022' + } + } +} diff --git a/src/entities/BlogCard/BlogCard.tsx b/src/entities/BlogCard/BlogCard.tsx new file mode 100644 index 00000000..f4f64202 --- /dev/null +++ b/src/entities/BlogCard/BlogCard.tsx @@ -0,0 +1,28 @@ +import { FC } from 'react' +import { TCard } from '@/models/CardModel' +import styles from './BlogCard.module.scss' +import Link from '@/shared/ui/Link/Link' +import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' + +export type Props = { + card: TCard +} + +/** + * Карточка из блока блог + * @param {TCard} card - параметры карточки из блога + */ + +const BlogCard: FC = ({ card }) => { + return ( + + {card.alt} + + {card.title} + + {card.date} + + ) +} + +export default BlogCard diff --git a/src/entities/NewsCard/NewsCard.module.scss b/src/entities/NewsCard/NewsCard.module.scss index 18573fca..84722723 100644 --- a/src/entities/NewsCard/NewsCard.module.scss +++ b/src/entities/NewsCard/NewsCard.module.scss @@ -20,14 +20,12 @@ scroll-snap-align: start; } - h3 { - width: 95%; - font-size: #{'min(max(14px, 1.2vw), 16px)'}; - line-height: 150%; - font-weight: 500; + .heading + { + font-size: #{'min(max(14px, 1.2vw), 16px)'}; } - &:hover h3 { + &:hover .heading { color: var.$link-color; } diff --git a/src/entities/NewsCard/NewsCard.tsx b/src/entities/NewsCard/NewsCard.tsx index 9820b7c9..006c6674 100644 --- a/src/entities/NewsCard/NewsCard.tsx +++ b/src/entities/NewsCard/NewsCard.tsx @@ -3,6 +3,7 @@ import { TCard } from '@/models/CardModel' import { TEXT_PROMO } from '@/shared/constants/constants' import styles from './NewsCard.module.scss' import Link from '@/shared/ui/Link/Link' +import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' export type Props = { card: TCard @@ -17,7 +18,9 @@ const NewsCard: FC = ({ card }) => { return ( {card.alt} -

{card.title}

+ + {card.title} + {card.date} {card.promo ? {TEXT_PROMO} : null} diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx index 7c12d2a1..33a016ea 100644 --- a/src/pages/MainPage/MainPage.tsx +++ b/src/pages/MainPage/MainPage.tsx @@ -2,20 +2,14 @@ import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperFor import SliderBlock from '@/components/SliderBlock/SliderBlock' import BrandsBlock from '@/widgets/BrandBlock/BrandBlock' import { storiesData } from '@/mockData/storiesData' -import { blogData } from '@/mockData/blogData' -import { - TEXT_STORIES, - TEXT_BLOG, - LINK_SHOW_ALL, - TEXT_CUSTOMERS_ABOUT_US, - LINK_REVIEWS_ALL -} from '@/shared/constants/constants' +import { TEXT_STORIES, TEXT_CUSTOMERS_ABOUT_US, LINK_REVIEWS_ALL } from '@/shared/constants/constants' import ArticleBlock from '@/components/ArticleBlock/ArticleBlock' import CategoryGrid from '@/widgets/CategoryGrid/CategoryGrid' import ReviewsBlock from '@/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock' import Advantages from '@/widgets/Advantages/ui/Advantages/Advantages' import NewsBlock from '@/widgets/NewsBlock/ui/NewsBlock' import ContainerCards from '@/components/ContainerCards/ContainerCards' +import BlogBlock from '@/widgets/BlogBlock/ui/BlogBlock' const MainPage = () => { return ( @@ -23,7 +17,7 @@ const MainPage = () => { - + diff --git a/src/widgets/BlogBlock/ui/BlogBlock.module.scss b/src/widgets/BlogBlock/ui/BlogBlock.module.scss new file mode 100644 index 00000000..3409d113 --- /dev/null +++ b/src/widgets/BlogBlock/ui/BlogBlock.module.scss @@ -0,0 +1,65 @@ +@use '@/app/styles/index' as var; + +.storybook { + width: 1080px; +} + +.wrapper { + width: 100%; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 18px; + + h2 { + font-size: #{'min(max(18px, 1.6vw), 20px)'}; + line-height: 115%; + font-weight: 500; + } + + article { + display: flex; + justify-content: space-between; + align-items: flex-end; + padding: 0 10px; + } + + .link { + font-size: 15px; + line-height: 120%; + font-weight: 500; + + &:hover { + opacity: 0.7; + } + } + + .svg { + width: 1.25rem; + height: 0.5625rem; + margin-left: 0.5rem; + vertical-align: middle; + } + + ul { + display: flex; + gap: 20px; + padding: 0 10px 20px; + overflow: auto hidden; + cursor: grab; + + &::-webkit-scrollbar { + height: 3px; + } + + &::-webkit-scrollbar-thumb { + background: var.$theme-primary-color; + cursor: grab; + } + + &::-webkit-scrollbar-track { + margin-left: 10px; + margin-right: 10px; + } + } +} \ No newline at end of file diff --git a/src/widgets/BlogBlock/ui/BlogBlock.stories.tsx b/src/widgets/BlogBlock/ui/BlogBlock.stories.tsx new file mode 100644 index 00000000..1c9ee805 --- /dev/null +++ b/src/widgets/BlogBlock/ui/BlogBlock.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react' +import styles from './BlogBlock.module.scss' +import { FC } from 'react' +import BlogBlock from './BlogBlock' + +const StorybookWrapper: FC = () => { + return ( +
+ +
+ ) +} + +const meta = { + title: 'widgets/BlogBlock', + component: StorybookWrapper, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'] +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = {} diff --git a/src/widgets/BlogBlock/ui/BlogBlock.tsx b/src/widgets/BlogBlock/ui/BlogBlock.tsx new file mode 100644 index 00000000..a7188d5e --- /dev/null +++ b/src/widgets/BlogBlock/ui/BlogBlock.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react' +import IconLink from '@/assets/icons/IconLink' +import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' +import Link from '@/shared/ui/Link/Link' +import styles from './BlogBlock.module.scss' +import Scroll from '@/shared/ui/Scroll/Scroll' +import { blogData } from '@/mockData/blogData' +import BlogCard from '@/entities/BlogCard/BlogCard' + +/** + * Блок группы карточек блога + */ + +const BlogBlock: FC = () => { + return ( +
+
+ Блог + + Показать все + + +
+ + {blogData.map(item => ( + + ))} + +
+ ) +} + +export default BlogBlock