From 715e92959a6fe58921967ce1d8d63937e290b2b4 Mon Sep 17 00:00:00 2001 From: Yulia Avramenko Date: Mon, 5 Feb 2024 13:49:48 +0300 Subject: [PATCH 001/166] #210-api-inserted-to-StoriesBlock --- .../StoreProvider/config/StateSchema.ts | 2 ++ .../providers/StoreProvider/config/store.ts | 4 ++- src/entities/StoryCard/StoryCard.module.scss | 10 +++++-- src/entities/StoryCard/StoryCard.stories.tsx | 7 ++--- src/entities/StoryCard/StoryCard.tsx | 12 ++++---- src/shared/api/types.ts | 3 +- .../StoriesBlock/model/selectors/selectors.ts | 5 ++++ .../StoriesBlock/model/services/getStories.ts | 18 ++++++++++++ .../StoriesBlock/model/slice/storiesSlice.ts | 29 +++++++++++++++++++ src/widgets/StoriesBlock/model/types/types.ts | 21 ++++++++++++++ src/widgets/StoriesBlock/ui/StoriesBlock.tsx | 18 +++++++++--- 11 files changed, 110 insertions(+), 19 deletions(-) create mode 100644 src/widgets/StoriesBlock/model/selectors/selectors.ts create mode 100644 src/widgets/StoriesBlock/model/services/getStories.ts create mode 100644 src/widgets/StoriesBlock/model/slice/storiesSlice.ts create mode 100644 src/widgets/StoriesBlock/model/types/types.ts diff --git a/src/app/providers/StoreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts index fb954d60..e2dcbf99 100644 --- a/src/app/providers/StoreProvider/config/StateSchema.ts +++ b/src/app/providers/StoreProvider/config/StateSchema.ts @@ -6,6 +6,7 @@ import { ApiInstance } from '@/shared/api/api' import { ShopNewsSchema } from '@/widgets/NewsBlock/model/types/types' import { StoreReviewsSchema } from '@/widgets/ReviewsBlock/model/types/types' import { CoreBaseFooterSchema } from '@/widgets/Footer/model/types/types' +import { IStoriesSchema } from '@/widgets/StoriesBlock/model/types/types' export interface StateSchema { login: LoginSchema @@ -15,6 +16,7 @@ export interface StateSchema { brand: BrandSchema searchResult: SearchResultSchema shopNews: ShopNewsSchema + stories: IStoriesSchema } export interface ThunkExtraArg { diff --git a/src/app/providers/StoreProvider/config/store.ts b/src/app/providers/StoreProvider/config/store.ts index 8074f338..f6426e56 100644 --- a/src/app/providers/StoreProvider/config/store.ts +++ b/src/app/providers/StoreProvider/config/store.ts @@ -8,6 +8,7 @@ import searchProductSlice from '@/features/SearchProduct/slice/searchProductSlic import { storeReviewsReducer } from '@/widgets/ReviewsBlock/model/slice/reviewsSlice' import footerSlice from '@/widgets/Footer/model/slice/footerSlice' import { shopNewsReducer } from '@/widgets/NewsBlock/model/slice/shopNewsSlice' +import { storiesReducer } from '@/widgets/StoriesBlock/model/slice/storiesSlice' export type RootState = StateSchema @@ -18,7 +19,8 @@ const rootReducer: ReducersMapObject = { brand: brandSlice, searchResult: searchProductSlice, storeReviews: storeReviewsReducer, - shopNews: shopNewsReducer + shopNews: shopNewsReducer, + stories: storiesReducer } export function createReduxStore(initialState: RootState) { diff --git a/src/entities/StoryCard/StoryCard.module.scss b/src/entities/StoryCard/StoryCard.module.scss index 5cbcdd55..eb6cdc53 100644 --- a/src/entities/StoryCard/StoryCard.module.scss +++ b/src/entities/StoryCard/StoryCard.module.scss @@ -1,6 +1,8 @@ @use '@/app/styles/index' as var; .card { + max-width: 160px; + min-width: 160px; position: relative; transition: transform 0.3s ease-in-out; display: flex; @@ -13,9 +15,13 @@ transition: transform 0.3s ease-in-out; } - img { + .img { + height: 240px; + width: 100%; border-radius: 6px; transition: transform 0.3s ease-in-out; scroll-snap-align: start; - } + object-fit: cover; + + } } \ No newline at end of file diff --git a/src/entities/StoryCard/StoryCard.stories.tsx b/src/entities/StoryCard/StoryCard.stories.tsx index 3ca6aeec..8da6e6a1 100644 --- a/src/entities/StoryCard/StoryCard.stories.tsx +++ b/src/entities/StoryCard/StoryCard.stories.tsx @@ -16,10 +16,7 @@ type Story = StoryObj export const Default: Story = { args: { - card: { - id: 1, - src: Img1, - alt: 'Stock image' - } + pictures: [Img1], + link: 'https://gealit.ru/api/catalogue/3w-clinic--krem-dlya-glaz-s-ekstraktom-chernogo-zhemchuga-black-pearl-eye-cream-whitening-40-ml-410158271/' } } diff --git a/src/entities/StoryCard/StoryCard.tsx b/src/entities/StoryCard/StoryCard.tsx index 31e326da..2c6b9ecd 100644 --- a/src/entities/StoryCard/StoryCard.tsx +++ b/src/entities/StoryCard/StoryCard.tsx @@ -1,10 +1,10 @@ import { FC } from 'react' -import { TCard } from '@/models/CardModel' import styles from './StoryCard.module.scss' import Link from '@/shared/ui/Link/Link' -export type Props = { - card: TCard +type TProps = { + link: string + pictures: string[] } /** @@ -12,10 +12,10 @@ export type Props = { * @param {TCard} card - параметры карточки из группы историй */ -const StoryCard: FC = ({ card }) => { +const StoryCard: FC = ({ link, pictures }) => { return ( - - {card.alt} + + история ) } diff --git a/src/shared/api/types.ts b/src/shared/api/types.ts index 7c9dc6fe..eebc2531 100644 --- a/src/shared/api/types.ts +++ b/src/shared/api/types.ts @@ -6,7 +6,8 @@ export enum ApiRoutes { STORE_REVIEWS = 'store-reviews', CATEGORIES = 'catalogue/category', CORE_BASE = 'core/base', - SHOP_NEWS = 'shopnews' + SHOP_NEWS = 'shopnews', + STORIES = 'stories' } export enum ApiErrorTypes { diff --git a/src/widgets/StoriesBlock/model/selectors/selectors.ts b/src/widgets/StoriesBlock/model/selectors/selectors.ts new file mode 100644 index 00000000..0c115414 --- /dev/null +++ b/src/widgets/StoriesBlock/model/selectors/selectors.ts @@ -0,0 +1,5 @@ +import { StateSchema } from '@/app/providers/StoreProvider' + +export const getStoriesSelector = (state: StateSchema) => { + return state.stories.stories +} diff --git a/src/widgets/StoriesBlock/model/services/getStories.ts b/src/widgets/StoriesBlock/model/services/getStories.ts new file mode 100644 index 00000000..41ca387c --- /dev/null +++ b/src/widgets/StoriesBlock/model/services/getStories.ts @@ -0,0 +1,18 @@ +import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema' +import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify' +import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types' +import { createAsyncThunk } from '@reduxjs/toolkit' +import { IStoriesData } from '../types/types' + +export const getStories = createAsyncThunk>( + 'stories', + async (_, thunkAPI) => { + const { rejectWithValue, extra } = thunkAPI + try { + const { data } = await extra.api.get(ApiRoutes.STORIES) + return data.results + } catch (error) { + return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR)) + } + } +) diff --git a/src/widgets/StoriesBlock/model/slice/storiesSlice.ts b/src/widgets/StoriesBlock/model/slice/storiesSlice.ts new file mode 100644 index 00000000..898c6627 --- /dev/null +++ b/src/widgets/StoriesBlock/model/slice/storiesSlice.ts @@ -0,0 +1,29 @@ +import { createSlice } from '@reduxjs/toolkit' +import { getStories } from '../services/getStories' +import { IStoriesSchema } from '../types/types' + +const initialState: IStoriesSchema = { + isLoading: false, + stories: [] +} + +export const storiesSlice = createSlice({ + name: 'stories', + initialState, + reducers: {}, + extraReducers: builder => { + builder + .addCase(getStories.pending, state => { + state.isLoading = true + }) + .addCase(getStories.fulfilled, (state, { payload }) => { + state.isLoading = false + state.stories = payload + }) + .addCase(getStories.rejected, state => { + state.isLoading = false + }) + } +}) + +export const { actions: storiesActions, reducer: storiesReducer } = storiesSlice diff --git a/src/widgets/StoriesBlock/model/types/types.ts b/src/widgets/StoriesBlock/model/types/types.ts new file mode 100644 index 00000000..ad83f7d4 --- /dev/null +++ b/src/widgets/StoriesBlock/model/types/types.ts @@ -0,0 +1,21 @@ +export interface IPaginatedResponse { + count: number + previous: string + next: string + results: T[] +} +export interface IStoriesPicturesData { + image: string +} + +export interface IStoriesData { + id: number + name: string + link: string + pictures: IStoriesPicturesData[] +} + +export interface IStoriesSchema { + isLoading: boolean + stories: IStoriesData[] +} diff --git a/src/widgets/StoriesBlock/ui/StoriesBlock.tsx b/src/widgets/StoriesBlock/ui/StoriesBlock.tsx index b81fd60d..88586391 100644 --- a/src/widgets/StoriesBlock/ui/StoriesBlock.tsx +++ b/src/widgets/StoriesBlock/ui/StoriesBlock.tsx @@ -1,22 +1,32 @@ -import { FC } from 'react' +import { FC, useEffect } from 'react' +import { getStories } from '../model/services/getStories' +import { useAppDispatch } from '@/shared/libs/hooks/store' +import { getStoriesSelector } from '../model/selectors/selectors' +import { useSelector } from 'react-redux' import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' import styles from './StoriesBlock.module.scss' import Scroll from '@/shared/ui/Scroll/Scroll' -import { storiesData } from '@/mockData/storiesData' import StoryCard from '@/entities/StoryCard/StoryCard' /** * Блок группы историй */ const StoriesBlock: FC = () => { + const dispatch = useAppDispatch() + const stories = useSelector(getStoriesSelector) + + useEffect(() => { + dispatch(getStories()) + }, []) + return (
Истории
- {storiesData.map(item => ( - + {stories.map(item => ( + item.image)} /> ))}
From fe6a9b6a9b5a13e8fbd24b8f21337cc09ae75cb1 Mon Sep 17 00:00:00 2001 From: Margarita Shumilina Date: Fri, 9 Feb 2024 17:19:40 +0300 Subject: [PATCH 002/166] #211-product-card-in-fsd --- config/build/loaders/buildCssLoader.cjs | 20 +- src/assets/icons/IconArrow.tsx | 14 +- src/assets/icons/IconLink.tsx | 7 +- src/assets/icons/IconStar.tsx | 8 +- .../blog-categories.module.scss | 2 - src/components/BlogMain/BlogMain.tsx | 8 +- src/components/Pagination/Pagination.tsx | 7 +- .../AdvantageCard/advantageCard.module.scss | 62 +++-- src/entities/BlogCard/BlogCard.module.scss | 12 +- src/entities/BrandCard/BrandCard.module.scss | 1 - .../ui/CardReview/cardReview.module.scss | 138 +++++----- .../ContactCard/contactCard.module.scss | 2 +- src/entities/NewsCard/NewsCard.module.scss | 17 +- .../ProductEntity/ProductEntity.module.scss | 84 +++--- src/entities/StoryCard/StoryCard.module.scss | 12 +- .../CardPreviewFooter.module.scss | 0 .../CardPreviewFooter/CardPreviewFooter.tsx | 0 .../CardPreviewHeader.module.scss | 0 .../CardPreviewHeader/CardPreviewHeader.tsx | 0 .../CartCouponApply.module.scss | 101 ++++---- .../CartEdit/ui/CartEdit/CartEdit.module.scss | 240 +++++++++--------- src/features/Contacts/contacts.module.scss | 11 +- .../ProductAvailability.module.scss | 0 .../ProductAvailability.tsx | 0 .../QuickPurchaseForm.module.scss | 2 +- .../WidgetButtonsFunctions.module.scss | 0 .../WidgetButtonsFunctions.tsx | 13 +- .../WidgetButtonsPurchase.module.scss | 0 .../WidgetButtonsPurchase.tsx | 0 src/pages/CartPage/CartPage.module.scss | 66 ++--- src/pages/ProductsPage/ProductsPage.tsx | 7 +- src/shared/styles/utils/_variables.scss | 2 +- src/shared/ui/Button/Button.tsx | 16 +- .../ui/ButtonDots/ButtonDots.module.scss | 29 +-- src/shared/ui/Heading/heading.module.scss | 21 +- .../ProductLabels/ProductLabels.module.scss | 23 ++ src/shared/ui/ProductLabels/ProductLabels.tsx | 24 ++ .../ui/ProductLabels}/utils/utils.ts | 0 src/shared/ui/Scroll/Scroll.module.scss | 44 ++-- .../ui/Subheading/subheading.module.scss | 8 +- src/stories/Button.tsx | 8 +- src/stories/Configure.mdx | 56 ++-- src/stories/Header.tsx | 5 +- src/stories/Page.tsx | 11 +- .../ui/Advantages/advantages.module.scss | 18 +- .../BlogBlock/ui/BlogBlock.module.scss | 2 +- .../Carousel/Carousel.module.scss | 2 +- .../Carousel/Carousel.stories.tsx | 0 .../ui => widgets}/Carousel/Carousel.tsx | 2 +- .../ui/MakeOrder/MakeOrder.module.scss | 174 ++++++------- .../NewsBlock/ui/NewsBlock.module.scss | 2 +- .../CardPreview/CardPreview.module.scss | 2 +- .../ProductItem}/CardPreview/CardPreview.tsx | 8 +- .../CardPreview/CardPrewiew.stories.tsx | 22 ++ .../ProductItem/ProductItem.module.scss} | 58 ++--- .../ProductItem/ProductItem.stories.tsx | 30 +++ .../ProductItem/ProductItem.tsx} | 69 +++-- .../ui/ReviewsBlock/reviewsBlock.module.scss | 100 ++++---- .../StoriesBlock/ui/StoriesBlock.module.scss | 4 +- 59 files changed, 859 insertions(+), 715 deletions(-) rename src/{components => features}/CardPreviewFooter/CardPreviewFooter.module.scss (100%) rename src/{components => features}/CardPreviewFooter/CardPreviewFooter.tsx (100%) rename src/{components => features}/CardPreviewHeader/CardPreviewHeader.module.scss (100%) rename src/{components => features}/CardPreviewHeader/CardPreviewHeader.tsx (100%) rename src/{components => features}/ProductAvailability/ProductAvailability.module.scss (100%) rename src/{components => features}/ProductAvailability/ProductAvailability.tsx (100%) rename src/{components => features}/WidgetButtonsFunctions/WidgetButtonsFunctions.module.scss (100%) rename src/{components => features}/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx (82%) rename src/{components => features}/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss (100%) rename src/{components => features}/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx (100%) create mode 100644 src/shared/ui/ProductLabels/ProductLabels.module.scss create mode 100644 src/shared/ui/ProductLabels/ProductLabels.tsx rename src/{components/ProductCard => shared/ui/ProductLabels}/utils/utils.ts (100%) rename src/{shared/ui => widgets}/Carousel/Carousel.module.scss (93%) rename src/{shared/ui => widgets}/Carousel/Carousel.stories.tsx (100%) rename src/{shared/ui => widgets}/Carousel/Carousel.tsx (97%) rename src/{components => widgets/ProductItem}/CardPreview/CardPreview.module.scss (92%) rename src/{components => widgets/ProductItem}/CardPreview/CardPreview.tsx (92%) create mode 100644 src/widgets/ProductItem/CardPreview/CardPrewiew.stories.tsx rename src/{components/ProductCard/ProductCard.module.scss => widgets/ProductItem/ProductItem.module.scss} (63%) create mode 100644 src/widgets/ProductItem/ProductItem.stories.tsx rename src/{components/ProductCard/ProductCard.tsx => widgets/ProductItem/ProductItem.tsx} (60%) diff --git a/config/build/loaders/buildCssLoader.cjs b/config/build/loaders/buildCssLoader.cjs index 88b590ce..f4bd6755 100644 --- a/config/build/loaders/buildCssLoader.cjs +++ b/config/build/loaders/buildCssLoader.cjs @@ -1,22 +1,20 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin') -module.exports.buildCssLoader = (isEnvProduction)=> { +module.exports.buildCssLoader = isEnvProduction => { return { test: /\.s[ac]ss$/i, use: [ - isEnvProduction ? MiniCssExtractPlugin.loader : 'style-loader' , + isEnvProduction ? MiniCssExtractPlugin.loader : 'style-loader', { loader: 'css-loader', options: { modules: { - auto: (resPath) => Boolean(resPath.includes('.module.')), - localIdentName: isEnvProduction - ? '[hash:base64:8]' - : '[local]--[hash:base64:5]', - }, - }, + auto: resPath => Boolean(resPath.includes('.module.')), + localIdentName: isEnvProduction ? '[hash:base64:8]' : '[local]--[hash:base64:5]' + } + } }, - 'sass-loader', - ], - }; + 'sass-loader' + ] + } } diff --git a/src/assets/icons/IconArrow.tsx b/src/assets/icons/IconArrow.tsx index 4554bcb4..c398d261 100644 --- a/src/assets/icons/IconArrow.tsx +++ b/src/assets/icons/IconArrow.tsx @@ -20,7 +20,12 @@ const IconArrow: FC = props => { switch (type) { case 'prev': return ( - + @@ -28,7 +33,12 @@ const IconArrow: FC = props => { ) case 'next': return ( - + diff --git a/src/assets/icons/IconLink.tsx b/src/assets/icons/IconLink.tsx index cc75bc96..9a64e5d0 100644 --- a/src/assets/icons/IconLink.tsx +++ b/src/assets/icons/IconLink.tsx @@ -13,7 +13,12 @@ const IconLink: FC = props => { }, [styles]) return ( - + diff --git a/src/assets/icons/IconStar.tsx b/src/assets/icons/IconStar.tsx index 5a0c69fc..3d998ef6 100644 --- a/src/assets/icons/IconStar.tsx +++ b/src/assets/icons/IconStar.tsx @@ -13,7 +13,13 @@ const IconStar: FC = props => { }, [styles]) return ( - + = props => {
    - {items.slice(currentPage == 1 ? 0 : itemNumber * (currentPage - 1), itemNumber * currentPage).map(item => ( - - ))} + {items + .slice(currentPage == 1 ? 0 : itemNumber * (currentPage - 1), itemNumber * currentPage) + .map(item => ( + + ))}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index e03d1ed4..c7189317 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -15,7 +15,12 @@ type TPaginationProps = { * @param {function} handlePageChange - функция изменения отображаемой страницы; * @param {function} handleShowMore - функция управления подгрузкой дополнительного контента; */ -export const Pagination: FC = ({ currentPage, totalPages, handlePageChange, handleShowMore }) => { +export const Pagination: FC = ({ + currentPage, + totalPages, + handlePageChange, + handleShowMore +}) => { return (
diff --git a/src/entities/AdvantageCard/ui/AdvantageCard/advantageCard.module.scss b/src/entities/AdvantageCard/ui/AdvantageCard/advantageCard.module.scss index 1507fe7a..59cdbbbd 100644 --- a/src/entities/AdvantageCard/ui/AdvantageCard/advantageCard.module.scss +++ b/src/entities/AdvantageCard/ui/AdvantageCard/advantageCard.module.scss @@ -2,45 +2,43 @@ @use '../../../../shared/styles/utils/variables' as var; .card { - display: flex; - width: 100%; - min-height: 1px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 20px; - + display: flex; + width: 100%; + min-height: 1px; + padding-left: 10px; + padding-right: 10px; + padding-bottom: 20px; } .link { - padding: 13px 20px; - background-color: var.$white; - text-decoration: none; - width: 100%; - border-radius: 10px; - height: 70px; - display: flex; - align-items: center; - justify-content: center; - color: var.$body-color; - transition: color 0.25s; - column-gap: 16px; - - @include media.respond-to('middle') { - justify-content: left; - } + padding: 13px 20px; + background-color: var.$white; + text-decoration: none; + width: 100%; + border-radius: 10px; + height: 70px; + display: flex; + align-items: center; + justify-content: center; + color: var.$body-color; + transition: color 0.25s; + column-gap: 16px; + @include media.respond-to('middle') { + justify-content: left; + } } .text { - padding: 0; - margin: 0; - font-size: 15px; - font-style: normal; - font-weight: 500; - line-height: 19.95px; + padding: 0; + margin: 0; + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: 19.95px; } .image { - height: 45px; - width: 45px; -} \ No newline at end of file + height: 45px; + width: 45px; +} diff --git a/src/entities/BlogCard/BlogCard.module.scss b/src/entities/BlogCard/BlogCard.module.scss index 5ee6b802..e76356f5 100644 --- a/src/entities/BlogCard/BlogCard.module.scss +++ b/src/entities/BlogCard/BlogCard.module.scss @@ -7,11 +7,11 @@ display: flex; flex-direction: column; justify-content: space-between; - gap: 15px; + gap: 15px; &:hover { transform: scale(1.1, 1.05); - transition: transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out; } img { @@ -20,9 +20,8 @@ scroll-snap-align: start; } - .heading - { - font-size: #{'min(max(14px, 1.2vw), 16px)'}; + .heading { + font-size: #{'min(max(14px, 1.2vw), 16px)'}; } &:hover .heading { @@ -32,5 +31,4 @@ span { color: var.$body-color-light-grey; } - -} \ No newline at end of file +} diff --git a/src/entities/BrandCard/BrandCard.module.scss b/src/entities/BrandCard/BrandCard.module.scss index d7137d83..ee751c62 100644 --- a/src/entities/BrandCard/BrandCard.module.scss +++ b/src/entities/BrandCard/BrandCard.module.scss @@ -22,7 +22,6 @@ width: 100%; height: 148px; } - } .wrap { diff --git a/src/entities/CardReview/ui/CardReview/cardReview.module.scss b/src/entities/CardReview/ui/CardReview/cardReview.module.scss index 296f8a0a..6a7e5b50 100644 --- a/src/entities/CardReview/ui/CardReview/cardReview.module.scss +++ b/src/entities/CardReview/ui/CardReview/cardReview.module.scss @@ -1,87 +1,87 @@ @use '../../../../shared/styles/utils/variables' as color; .review { - display: flex; - flex-direction: column; - min-width: 340px; - align-items: flex-start; - justify-content: space-between; - padding: 35px 30px 40px 40px; - gap: 9px; - - .title { - display: flex; - align-items: center; - gap: 3px; - } + display: flex; + flex-direction: column; + min-width: 340px; + align-items: flex-start; + justify-content: space-between; + padding: 35px 30px 40px 40px; + gap: 9px; - p { - font-size: 0.9375rem; - font-weight: 400; - line-height: 1.7; - } + .title { + display: flex; + align-items: center; + gap: 3px; + } - &__header { - display: flex; - align-items: center; - line-height: 1.62; - gap: 11px; + p { + font-size: 0.9375rem; + font-weight: 400; + line-height: 1.7; + } - h3 { - font-size: 1rem; - font-weight: 500; - } + &__header { + display: flex; + align-items: center; + line-height: 1.62; + gap: 11px; - span { - font-size: 0.875rem; - font-weight: 400; - display: flex; - align-items: center; - gap: 3px; - } + h3 { + font-size: 1rem; + font-weight: 500; } - &__initials { - width: 40px; - height: 40px; - border-radius: 50%; - background: color.$bg-gradient-green; - color: color.$white; - font-size: 1.125rem; - font-weight: 500; - line-height: 1.2; - display: flex; - align-items: center; - justify-content: center; + span { + font-size: 0.875rem; + font-weight: 400; + display: flex; + align-items: center; + gap: 3px; } + } + + &__initials { + width: 40px; + height: 40px; + border-radius: 50%; + background: color.$bg-gradient-green; + color: color.$white; + font-size: 1.125rem; + font-weight: 500; + line-height: 1.2; + display: flex; + align-items: center; + justify-content: center; + } - &__data { - font-weight: 400; - line-height: 1.7; + &__data { + font-weight: 400; + line-height: 1.7; - p { - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 5; - -webkit-box-orient: vertical; - text-overflow: clip; - } + p { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + text-overflow: clip; + } - span { - font-size: 0.875rem; - opacity: 0.4; - } + span { + font-size: 0.875rem; + opacity: 0.4; } + } } .link__text { - font-size: 0.9375rem; - line-height: 1.7; - font-weight: 500; - text-decoration: none; - color: color.$link-color; + font-size: 0.9375rem; + line-height: 1.7; + font-weight: 500; + text-decoration: none; + color: color.$link-color; - &:hover { - opacity: 0.7; - } -} \ No newline at end of file + &:hover { + opacity: 0.7; + } +} diff --git a/src/entities/ContactCard/contactCard.module.scss b/src/entities/ContactCard/contactCard.module.scss index 9520775b..62e8a2ea 100644 --- a/src/entities/ContactCard/contactCard.module.scss +++ b/src/entities/ContactCard/contactCard.module.scss @@ -19,4 +19,4 @@ width: 60px; height: 60px; margin-bottom: 12px; -} \ No newline at end of file +} diff --git a/src/entities/NewsCard/NewsCard.module.scss b/src/entities/NewsCard/NewsCard.module.scss index 8f3ed61f..8ae0b30e 100644 --- a/src/entities/NewsCard/NewsCard.module.scss +++ b/src/entities/NewsCard/NewsCard.module.scss @@ -8,16 +8,15 @@ display: flex; flex-direction: column; justify-content: space-between; - gap: 15px; + gap: 15px; &:hover { transform: scale(1.1, 1.05); - transition: transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out; } - .heading - { - font-size: #{'min(max(14px, 1.2vw), 16px)'}; + .heading { + font-size: #{'min(max(14px, 1.2vw), 16px)'}; } &:hover .heading { @@ -41,12 +40,12 @@ line-height: 120%; font-weight: 500; } - + .img { - height: 180px; - width: 100%; + height: 180px; + width: 100%; border-radius: 6px; transition: transform 0.3s ease-in-out; scroll-snap-align: start; } -} \ No newline at end of file +} diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss index 489891f7..4e9b38ea 100644 --- a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss +++ b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss @@ -1,59 +1,57 @@ @use '../../../../shared/styles/utils/variables' as var; @use '../../../../shared/styles/utils/mixins' as media; - - .description { - display: flex; - align-items: center; - padding: 10px; - background: var.$white; - border-radius: 10px; - height: 110px; - width: 80%; + display: flex; + align-items: center; + padding: 10px; + background: var.$white; + border-radius: 10px; + height: 110px; + width: 80%; } .frame { - width: 90px; - height: 90px; - display: flex; - align-items: center; - justify-content: center; - padding: 10px; - margin: 0 20px 0 0; - background: var.$white; - border-radius: 5px; - - @include media.respond-to('large') { - border: 1px solid var.$light-grey; - } + width: 90px; + height: 90px; + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + margin: 0 20px 0 0; + background: var.$white; + border-radius: 5px; + + @include media.respond-to('large') { + border: 1px solid var.$light-grey; + } } .image { - display: flex; - max-height: 100%; - width: 70px; - height: 70px; - object-fit: cover; + display: flex; + max-height: 100%; + width: 70px; + height: 70px; + object-fit: cover; } .description_wrapper { - display: flex; - flex-direction: column; - max-height: 80px; + display: flex; + flex-direction: column; + max-height: 80px; } .name { - display: flex; - font-size: 15px; - line-height: 1.35; - font-weight: 700; - color: var.$body-color; - text-overflow: ellipsis; - overflow: hidden; - width: 250px; - - @include media.respond-to('large') { - width: 100%; - } -} \ No newline at end of file + display: flex; + font-size: 15px; + line-height: 1.35; + font-weight: 700; + color: var.$body-color; + text-overflow: ellipsis; + overflow: hidden; + width: 250px; + + @include media.respond-to('large') { + width: 100%; + } +} diff --git a/src/entities/StoryCard/StoryCard.module.scss b/src/entities/StoryCard/StoryCard.module.scss index 5cbcdd55..c09e1c91 100644 --- a/src/entities/StoryCard/StoryCard.module.scss +++ b/src/entities/StoryCard/StoryCard.module.scss @@ -1,21 +1,21 @@ @use '@/app/styles/index' as var; -.card { +.card { position: relative; transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; justify-content: space-between; - gap: 15px; + gap: 15px; &:hover { transform: scale(1.1, 1.05); - transition: transform 0.3s ease-in-out; + transition: transform 0.3s ease-in-out; } - + img { border-radius: 6px; transition: transform 0.3s ease-in-out; scroll-snap-align: start; - } -} \ No newline at end of file + } +} diff --git a/src/components/CardPreviewFooter/CardPreviewFooter.module.scss b/src/features/CardPreviewFooter/CardPreviewFooter.module.scss similarity index 100% rename from src/components/CardPreviewFooter/CardPreviewFooter.module.scss rename to src/features/CardPreviewFooter/CardPreviewFooter.module.scss diff --git a/src/components/CardPreviewFooter/CardPreviewFooter.tsx b/src/features/CardPreviewFooter/CardPreviewFooter.tsx similarity index 100% rename from src/components/CardPreviewFooter/CardPreviewFooter.tsx rename to src/features/CardPreviewFooter/CardPreviewFooter.tsx diff --git a/src/components/CardPreviewHeader/CardPreviewHeader.module.scss b/src/features/CardPreviewHeader/CardPreviewHeader.module.scss similarity index 100% rename from src/components/CardPreviewHeader/CardPreviewHeader.module.scss rename to src/features/CardPreviewHeader/CardPreviewHeader.module.scss diff --git a/src/components/CardPreviewHeader/CardPreviewHeader.tsx b/src/features/CardPreviewHeader/CardPreviewHeader.tsx similarity index 100% rename from src/components/CardPreviewHeader/CardPreviewHeader.tsx rename to src/features/CardPreviewHeader/CardPreviewHeader.tsx diff --git a/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss b/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss index df6c740d..c173372b 100644 --- a/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss +++ b/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss @@ -2,79 +2,78 @@ @use '../../../../shared/styles/utils/mixins' as media; .container { - display: flex; - flex-direction: column; - padding: 30px 40px; - background-color: var.$white; - width: 460px; - border-radius: 5px; + display: flex; + flex-direction: column; + padding: 30px 40px; + background-color: var.$white; + width: 460px; + border-radius: 5px; - @include media.respond-to('large') { - width: 100% - } + @include media.respond-to('large') { + width: 100%; + } } .wrapper { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 10px; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; } .title { - font-size: 18px; - line-height: 1.2; - font-weight: 600; + font-size: 18px; + line-height: 1.2; + font-weight: 600; } .button_change { - border: none; - padding: 0; - font-size: 14px; - color: var.$link-color; + border: none; + padding: 0; + font-size: 14px; + color: var.$link-color; - &:hover { - opacity: 0.8; - } + &:hover { + opacity: 0.8; + } } .link { - text-decoration: none; + text-decoration: none; } .form { - display: flex; - align-items: center; - justify-content: space-between; - border: 1px solid var.$light-grey; - border-radius: 5px; - padding: 3px 3px 3px 20px; + display: flex; + align-items: center; + justify-content: space-between; + border: 1px solid var.$light-grey; + border-radius: 5px; + padding: 3px 3px 3px 20px; - &:focus-within { - border: 1px solid var.$black; - } + &:focus-within { + border: 1px solid var.$black; + } } -.form>.input { - margin-left: 0; - - &::placeholder { - color: var.$body-color-light-grey; - } +.form > .input { + margin-left: 0; + &::placeholder { + color: var.$body-color-light-grey; + } } .button { - height: 36px; - padding: 5px 20px; - background: var.$light-grey; - color: var.$black; - font-size: 14px; - font-weight: 700; + height: 36px; + padding: 5px 20px; + background: var.$light-grey; + color: var.$black; + font-size: 14px; + font-weight: 700; - &:hover { - background-color: var.$theme-primary-color; - color: var.$white; - } -} \ No newline at end of file + &:hover { + background-color: var.$theme-primary-color; + color: var.$white; + } +} diff --git a/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss b/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss index 674bc603..a6824c79 100644 --- a/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss +++ b/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss @@ -2,170 +2,170 @@ @use '../../../../shared/styles/utils/mixins' as media; .container { - display: flex; - align-items: center; + display: flex; + align-items: center; + width: 100%; + min-width: 500px; + height: 140px; + background-color: var.$white; + border-radius: 10px; + padding: 20px; + position: relative; + + @include media.respond-to('large') { width: 100%; - min-width: 500px; - height: 140px; - background-color: var.$white; - border-radius: 10px; - padding: 20px; - position: relative; - - @include media.respond-to('large') { - width: 100%; - flex-direction: column; - height: 200px; - row-gap: 20px; - padding-right: 20px; - } + flex-direction: column; + height: 200px; + row-gap: 20px; + padding-right: 20px; + } } .product { - display: flex; - align-items: center; - width: 70%; + display: flex; + align-items: center; + width: 70%; - @include media.respond-to('large') { - width: 100%; - } + @include media.respond-to('large') { + width: 100%; + } } - .input { - display: flex; - font-size: 18px; - line-height: 28px; - font-weight: 500; - letter-spacing: 0.1px; - background: inherit; - height: 100%; - min-width: 20px; - max-width: 40px; - text-align: center; - appearance: none; - outline: none; - margin-left: 1px; - margin-right: 1px; + display: flex; + font-size: 18px; + line-height: 28px; + font-weight: 500; + letter-spacing: 0.1px; + background: inherit; + height: 100%; + min-width: 20px; + max-width: 40px; + text-align: center; + appearance: none; + outline: none; + margin-left: 1px; + margin-right: 1px; } .counter { - border: 1px solid var.$light-grey; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: space-between; - background-color: inherit; - padding: 4px; - height: 48px; - - @include media.respond-to('large') { - width: 100%; - } + border: 1px solid var.$light-grey; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: space-between; + background-color: inherit; + padding: 4px; + height: 48px; + + @include media.respond-to('large') { + width: 100%; + } } .button { - border: none; - background: none; - padding: 0; - font-family: inherit; - display: flex; - align-items: center; - justify-content: center; - width: 20px; - height: 100%; - transition: background 0.25s; + border: none; + background: none; + padding: 0; + font-family: inherit; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 100%; + transition: background 0.25s; } .button_decrease:hover { - background-color: var.$light-grey; - border-radius: 4px 0 0 4px; + background-color: var.$light-grey; + border-radius: 4px 0 0 4px; } .button_increase:hover { - background-color: var.$light-grey; - border-radius: 0 4px 4px 0; + background-color: var.$light-grey; + border-radius: 0 4px 4px 0; } .sum_wrapper { - display: flex; - flex-direction: column; - padding-left: 3%; - margin-right: 5%; - - @include media.respond-to('large') { - width: 25%; - } + display: flex; + flex-direction: column; + padding-left: 3%; + margin-right: 5%; + + @include media.respond-to('large') { + width: 25%; + } } .sum { - font-size: 18px; - white-space: nowrap; + font-size: 18px; + white-space: nowrap; } .price { - font-size: 13.5px; - color: var.$body-color-light-grey; - line-height: 1.2; - font-weight: 400; - white-space: nowrap; + font-size: 13.5px; + color: var.$body-color-light-grey; + line-height: 1.2; + font-weight: 400; + white-space: nowrap; } .button_dots { - position: absolute; - z-index: 90; - top: 0; - right: 0; + position: absolute; + z-index: 90; + top: 0; + right: 0; } - .wrapper { - position: absolute; - top: 40px; - right: -210px; - background: var.$white; - box-shadow: 0 0 20px rgba(170 189 206 /25%); - border-radius: 5px; - padding: 15px; - min-width: 228px; - transition: opacity 0.25s, visibility 0.25s; - z-index: 100; - - @include media.respond-to('large') { - top: 60px; - right: 0; - } + position: absolute; + top: 40px; + right: -210px; + background: var.$white; + box-shadow: 0 0 20px rgba(170 189 206 /25%); + border-radius: 5px; + padding: 15px; + min-width: 228px; + transition: + opacity 0.25s, + visibility 0.25s; + z-index: 100; + + @include media.respond-to('large') { + top: 60px; + right: 0; + } } .menu { - margin: 0; - padding: 0; - list-style: none; - white-space: nowrap; + margin: 0; + padding: 0; + list-style: none; + white-space: nowrap; } .line { - margin-top: 15px; - margin-bottom: 15px; - height: 1px; - width: 100%; - color: var.$body-color-light-grey; + margin-top: 15px; + margin-bottom: 15px; + height: 1px; + width: 100%; + color: var.$body-color-light-grey; } .item { - &:first-child { - border-bottom: 1px solid var.$body-color-light-grey; - margin-bottom: 15px; - padding-bottom: 15px; - } + &:first-child { + border-bottom: 1px solid var.$body-color-light-grey; + margin-bottom: 15px; + padding-bottom: 15px; + } } .menu_button { - font-size: 15px; - line-height: 1.2; - font-weight: 400; - - &:hover { - color: var.$theme-primary-color; - } -} \ No newline at end of file + font-size: 15px; + line-height: 1.2; + font-weight: 400; + + &:hover { + color: var.$theme-primary-color; + } +} diff --git a/src/features/Contacts/contacts.module.scss b/src/features/Contacts/contacts.module.scss index e8ada6e4..ddaf375f 100644 --- a/src/features/Contacts/contacts.module.scss +++ b/src/features/Contacts/contacts.module.scss @@ -15,7 +15,10 @@ position: absolute; bottom: 100%; right: 0; - transition: opacity 0.25s, visibility 0.25s, transform 0.25s; + transition: + opacity 0.25s, + visibility 0.25s, + transform 0.25s; } .contactsMenuHidden { @@ -30,7 +33,9 @@ } .button { - transition: transform 0.25s, background-color 0.25s; + transition: + transform 0.25s, + background-color 0.25s; border: none; } @@ -40,7 +45,7 @@ .button:active { transition: none; - transform: scale(.95); + transform: scale(0.95); } .buttonMessageIcon { diff --git a/src/components/ProductAvailability/ProductAvailability.module.scss b/src/features/ProductAvailability/ProductAvailability.module.scss similarity index 100% rename from src/components/ProductAvailability/ProductAvailability.module.scss rename to src/features/ProductAvailability/ProductAvailability.module.scss diff --git a/src/components/ProductAvailability/ProductAvailability.tsx b/src/features/ProductAvailability/ProductAvailability.tsx similarity index 100% rename from src/components/ProductAvailability/ProductAvailability.tsx rename to src/features/ProductAvailability/ProductAvailability.tsx diff --git a/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.module.scss b/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.module.scss index 2181e2c0..632c3f35 100644 --- a/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.module.scss +++ b/src/features/QuickPurchase/ui/QuickPurchaseForm/QuickPurchaseForm.module.scss @@ -65,5 +65,5 @@ .button { width: 100%; - height: 56px + height: 56px; } diff --git a/src/components/WidgetButtonsFunctions/WidgetButtonsFunctions.module.scss b/src/features/WidgetButtonsFunctions/WidgetButtonsFunctions.module.scss similarity index 100% rename from src/components/WidgetButtonsFunctions/WidgetButtonsFunctions.module.scss rename to src/features/WidgetButtonsFunctions/WidgetButtonsFunctions.module.scss diff --git a/src/components/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx b/src/features/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx similarity index 82% rename from src/components/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx rename to src/features/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx index 9f609ef9..e1105635 100644 --- a/src/components/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx +++ b/src/features/WidgetButtonsFunctions/WidgetButtonsFunctions.tsx @@ -5,8 +5,9 @@ import { ECardView } from '@/shared/model/types/common' import IconCompare from '@/assets/icons/IconCompare.svg' import IconLike from '@/assets/icons/IconLike' import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button' -import { getStylesForCurrentLayout } from '../ProductCard/utils/utils' -import styles from '../ProductCard/ProductCard.module.scss' +import { getStylesForCurrentLayout } from '@/shared/ui/ProductLabels/utils/utils' +// import styles from '../ProductCard/ProductCard.module.scss' +import styles from '@/widgets/ProductItem/ProductItem.module.scss' import stylesSvg from './WidgetButtonsFunctions.module.scss' type TWidgetButtonsFunctions = { @@ -45,8 +46,8 @@ export const WidgetButtonsFunctions: FC = ({ [getStylesForCurrentLayout('customButton', stylesSvg)[layout]]: layout })}> @@ -58,8 +59,8 @@ export const WidgetButtonsFunctions: FC = ({ [getStylesForCurrentLayout('customButton', stylesSvg)[layout]]: layout })}> diff --git a/src/components/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss b/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss similarity index 100% rename from src/components/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss rename to src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.module.scss diff --git a/src/components/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx b/src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx similarity index 100% rename from src/components/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx rename to src/features/WidgetButtonsPurchase/WidgetButtonsPurchase.tsx diff --git a/src/pages/CartPage/CartPage.module.scss b/src/pages/CartPage/CartPage.module.scss index 03e9bdb9..a942fbb7 100644 --- a/src/pages/CartPage/CartPage.module.scss +++ b/src/pages/CartPage/CartPage.module.scss @@ -2,51 +2,51 @@ @use '../../shared/styles/utils/mixins' as media; .container { - display: flex; - column-gap: 20px; - margin-bottom: 160px; - width: 100%; - - @include media.respond-to('large') { - flex-direction: column; - row-gap: 20px; - } + display: flex; + column-gap: 20px; + margin-bottom: 160px; + width: 100%; + + @include media.respond-to('large') { + flex-direction: column; + row-gap: 20px; + } } .cards { - display: flex; - flex-direction: column; - row-gap: 10px; - width: 100%; + display: flex; + flex-direction: column; + row-gap: 10px; + width: 100%; } .wrapper { - display: flex; - flex-direction: column; - row-gap: 10px; + display: flex; + flex-direction: column; + row-gap: 10px; } .heading { - margin-top: 20px; + margin-top: 20px; } .titles { - display: flex; - flex-direction: column; - align-self: start; - row-gap: 10px; - margin-bottom: 20px; - margin-top: 25px; + display: flex; + flex-direction: column; + align-self: start; + row-gap: 10px; + margin-bottom: 20px; + margin-top: 25px; } .link { - text-decoration: none; - color: var.$subtitle-color; - font-size: 13.5px; - font-weight: 400; - line-height: 16.2px; - - &:hover { - color: var.$theme-primary-color; - } -} \ No newline at end of file + text-decoration: none; + color: var.$subtitle-color; + font-size: 13.5px; + font-weight: 400; + line-height: 16.2px; + + &:hover { + color: var.$theme-primary-color; + } +} diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx index 83cfa7dc..07204553 100644 --- a/src/pages/ProductsPage/ProductsPage.tsx +++ b/src/pages/ProductsPage/ProductsPage.tsx @@ -5,11 +5,11 @@ import { CategoryList } from '@/components/CategoryList/CategoryList' import { PageDescription } from '@/components/PageDescription/PageDescription' import { PageControls } from '@/components/PageControls/PageControls' import { Pagination } from '@/components/Pagination/Pagination' -import { ProductCard } from '@/components/ProductCard/ProductCard' import { ITEMS_PER_PAGE_OPTION, SORT_OPTION, TOTAL_PAGES } from '@/mockData/productsPageOptions' import { ECardView } from '@/shared/model/types/common' -import { CardPreview } from '@/components/CardPreview/CardPreview' +import { CardPreview } from '@/widgets/ProductItem/CardPreview/CardPreview' import styles from './ProductsPage.module.scss' +import { ProductItem } from '@/widgets/ProductItem/ProductItem' /** * Страница со списокм товаров. @@ -84,7 +84,8 @@ export const ProductsPage = () => { />
{Array.from({ length: 8 }, (_, index) => ( - + // + ))}
{ */ export const Button: FC = props => { - const { className, children, disabled, theme, design = ButtonDesign.SQUARE, size = ButtonSize.M, ...rest } = props + const { + className, + children, + disabled, + theme, + design = ButtonDesign.SQUARE, + size = ButtonSize.M, + ...rest + } = props const additionalClasses = [className, theme && style[theme], style[size], style[design]] return ( - ) diff --git a/src/shared/ui/ButtonDots/ButtonDots.module.scss b/src/shared/ui/ButtonDots/ButtonDots.module.scss index 04927204..a45b0729 100644 --- a/src/shared/ui/ButtonDots/ButtonDots.module.scss +++ b/src/shared/ui/ButtonDots/ButtonDots.module.scss @@ -1,22 +1,21 @@ @use '../../../shared/styles/utils/variables' as var; @use '../../../shared/styles/utils/mixins' as media; - .button { - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - padding: 20px; - border: none; - background-color: inherit; - position: relative; - right: 0; - top: 0; - border-radius: 10px; - z-index: 10px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + padding: 20px; + border: none; + background-color: inherit; + position: relative; + right: 0; + top: 0; + border-radius: 10px; + z-index: 10px; } .container { - position: relative; -} \ No newline at end of file + position: relative; +} diff --git a/src/shared/ui/Heading/heading.module.scss b/src/shared/ui/Heading/heading.module.scss index a6ffd294..cd3be3b6 100644 --- a/src/shared/ui/Heading/heading.module.scss +++ b/src/shared/ui/Heading/heading.module.scss @@ -1,27 +1,26 @@ @use '../../styles/utils/variables' as var; .title { - color: var.$body-color; - font-weight: 700; + color: var.$body-color; + font-weight: 700; } - .big { - font-size: 25px; - line-height: 28.75px; + font-size: 25px; + line-height: 28.75px; } .medium { - font-size: 24px; - line-height: 28.8px; + font-size: 24px; + line-height: 28.8px; } .normal { - font-size: 20px; - line-height: 23px; + font-size: 20px; + line-height: 23px; } .small { - font-size: 16px; - line-height: 25.92px; + font-size: 16px; + line-height: 25.92px; } diff --git a/src/shared/ui/ProductLabels/ProductLabels.module.scss b/src/shared/ui/ProductLabels/ProductLabels.module.scss new file mode 100644 index 00000000..16179711 --- /dev/null +++ b/src/shared/ui/ProductLabels/ProductLabels.module.scss @@ -0,0 +1,23 @@ +@use '../../styles/utils/variables' as var; + +.product-item__labels { + display: flex; +} + +.product-item__labels_type_list, +.product-item__labels_type_compact { + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +.product-item__label { + background-color: var.$product-label-hit; + color: var.$white; + padding: 2px 6px; + font-size: 12px; + line-height: 20px; + font-weight: 700; + border-radius: 4px; +} diff --git a/src/shared/ui/ProductLabels/ProductLabels.tsx b/src/shared/ui/ProductLabels/ProductLabels.tsx new file mode 100644 index 00000000..67a26175 --- /dev/null +++ b/src/shared/ui/ProductLabels/ProductLabels.tsx @@ -0,0 +1,24 @@ +import { FC } from 'react' +import styles from './ProductLabels.module.scss' +import classnames from 'classnames' +import { ECardView } from '@/shared/model/types/common' +import { getStylesForCurrentLayout } from '@/shared/ui/ProductLabels/utils/utils' + +type TProductCard = { + layout: ECardView +} + +/** + * Компонент лейбла на карточке товара. + * @param {ECardView} props.layout- текущий вид отображения карточки товара; + */ +export const ProductLabels: FC = ({ layout }) => { + return ( +
+ Хит +
+ ) +} diff --git a/src/components/ProductCard/utils/utils.ts b/src/shared/ui/ProductLabels/utils/utils.ts similarity index 100% rename from src/components/ProductCard/utils/utils.ts rename to src/shared/ui/ProductLabels/utils/utils.ts diff --git a/src/shared/ui/Scroll/Scroll.module.scss b/src/shared/ui/Scroll/Scroll.module.scss index 9847bb0d..554a83bb 100644 --- a/src/shared/ui/Scroll/Scroll.module.scss +++ b/src/shared/ui/Scroll/Scroll.module.scss @@ -1,33 +1,33 @@ @use '@/app/styles/index' as var; -.extra { - background-color: orange; - min-width: 200px; +.extra { + background-color: orange; + min-width: 200px; } .additional { - width: 1000px; - height: 100px; + width: 1000px; + height: 100px; } .scroll { - display: flex; - gap: 20px; - padding: 0 10px 20px; - overflow: auto hidden; - cursor: grab; + display: flex; + gap: 20px; + padding: 0 10px 20px; + overflow: auto hidden; + cursor: grab; - &::-webkit-scrollbar { - height: 3px; - } + &::-webkit-scrollbar { + height: 3px; + } - &::-webkit-scrollbar-thumb { - background: var.$theme-primary-color; - cursor: grab; - } + &::-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 + &::-webkit-scrollbar-track { + margin-left: 10px; + margin-right: 10px; + } +} diff --git a/src/shared/ui/Subheading/subheading.module.scss b/src/shared/ui/Subheading/subheading.module.scss index 8dd1a7d1..766690d4 100644 --- a/src/shared/ui/Subheading/subheading.module.scss +++ b/src/shared/ui/Subheading/subheading.module.scss @@ -1,8 +1,8 @@ @use '../../styles/utils/variables' as var; .subtitle { - color: var.$subtitle-color; - font-size: 13.5px; - font-weight: 400; - line-height: 16.2px; + color: var.$subtitle-color; + font-size: 13.5px; + font-weight: 400; + line-height: 16.2px; } diff --git a/src/stories/Button.tsx b/src/stories/Button.tsx index 9eb7c543..27870cdc 100644 --- a/src/stories/Button.tsx +++ b/src/stories/Button.tsx @@ -26,7 +26,13 @@ interface ButtonProps { /** * Primary UI component for user interaction */ -export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => { +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}: ButtonProps) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary' return (