Merge pull request #431 from Studio-Yandex-Practicum/enhancement_425_…

…cart_cards

enhancement_425_cart_cards

src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss

@@ -1,56 +1,58 @@
-@use '../../../../shared/styles/utils/variables' as var;
-@use '../../../../shared/styles/utils/mixins' as media;
+@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: 60%;
-}
-
-.frame {
-  width: 90px;
-  height: 90px;
-  display: flex;
+.productEntity {
+  grid-area: productEntity;
+  display: grid;
+  grid-template-columns: 40% 1fr;
   align-items: center;
-  justify-content: center;
-  padding: 10px;
-  margin: 0 20px 0 0;
-  background: var.$white;
-  border-radius: 5px;
+  gap: 20px;
+  width: 100%;
+  max-width: 500px;
 
   @include media.respond-to('large') {
-    border: 1px solid var.$light-grey;
+    max-width: 100%;
+  }
+
+  @include media.respond-to('middle') {
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  &__imageBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 
 .image {
-  display: flex;
-  max-height: 100%;
-  width: 70px;
-  height: 70px;
+  width: 100px;
   object-fit: cover;
 }
 
-.description_wrapper {
+.description {
   display: flex;
   flex-direction: column;
-  max-height: 80px;
+  gap: 2px;
+  width: 100%;
+
+  @include media.respond-to('middle') {
+    flex-direction: column;
+    max-width: 100%;
+  }
 }
 
 .name {
   display: flex;
   font-size: 15px;
-  line-height: 1.35;
   font-weight: 700;
   color: var.$body-color;
   text-overflow: ellipsis;
   overflow: hidden;
-
-  @include media.respond-to('large') {
-    width: 100%;
+  transition: 0.25s;
+
+  &:hover {
+    color: var.$theme-primary-color;
   }
 }

src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx

@@ -1,6 +1,7 @@
 import { type FC } from 'react'
 
 import { IProduct } from '@/shared/model/types/ProductModel'
+import Link from '@/shared/ui/Link/Link'
 import Subheading from '@/shared/ui/Subheading/Subheading'
 
 import styles from './ProductEntity.module.scss'
@@ -9,23 +10,24 @@ import styles from './ProductEntity.module.scss'
  * Компонент служит для отображения товаров, пришедших с сервера.
  * @param {IImagesData[]} images-картика с изображением продукта;
  * @param {string} name- название продукта;
- * @param {number} id -артикул продукта;
+ * @param {number} code -артикул продукта;
  * @param {number} price -стоимость продукта;
  * @param {string} currency - валюта, в которой обозначена стоимость;
  */
 
-export const ProductEntity: FC<IProduct> = product => {
+export const ProductEntity: FC<IProduct> = ({ ...product }) => {
   return (
-    <div className={`${styles.description}`}>
-      <div className={`${styles.frame}`}>
-        {(product.images.length > 0 && (
-          <img src={product.images[0].image} alt={'product'} className={styles.image} />
-        )) || <></>}
-      </div>
-      <div className={`${styles.description_wrapper}`}>
-        <Subheading>{product.id}</Subheading>
-        <a className={`${styles.name}`}>{product.name}</a>
+    <div className={styles.productEntity}>
+      <div className={styles.productEntity__imageBox}>
+        <img src={product.images[0].image} alt="product" className={styles.image} />
       </div>
+
+      <article className={styles.description}>
+        <Subheading className={styles.code}>{product.code}</Subheading>
+        <Link to={'#'} className={styles.name}>
+          {product.name}
+        </Link>
+      </article>
     </div>
   )
 }

src/features/CartEdit/ui/CartEdit/CartEdit.module.scss

@@ -1,116 +1,84 @@
-@use '../../../../shared/styles/utils/variables' as var;
-@use '../../../../shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
+@use '@/shared/styles/utils/z-index' as z-index;
 
-.container {
-  display: flex;
+.cartEdit {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 20% 20%;
+  grid-template-areas: 'productEntity count sumWrapper';
   align-items: center;
+  gap: 20px;
   width: 100%;
-  min-width: 500px;
-  height: 140px;
-  background-color: var.$white;
+  min-height: 140px;
+  background: 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;
-  }
-}
-
-.product {
-  display: flex;
-  align-items: center;
-  width: 70%;
-
-  @include media.respond-to('large') {
-    width: 100%;
+  @include media.respond-to('middle') {
+    grid-template-columns: 40% 1fr;
+    grid-template-areas:
+      'productEntity productEntity'
+      'count sumWrapper';
+    gap: 5px;
   }
 }
 
 .input {
-  display: flex;
+  width: 100%;
+  max-width: 40px;
   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 {
+  grid-area: count;
+  display: flex;
+  justify-self: center;
+  height: 50px;
   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: 50px; // bug поменяла 20 на 50 для того,чтобы svg отображался в storybook, при 20px в storybook svg сжимается сильно и пропадает, на сайте padding от <Button> переписывается, а в storybook нет
+  width: 22px;
   height: 100%;
-  transition: background 0.25s;
+  padding: 0;
+  transition: 0.25s;
 }
 
 .button_decrease:hover {
-  background-color: var.$light-grey;
+  background: var.$light-grey;
   border-radius: 4px 0 0 4px;
 }
 
 .button_increase:hover {
-  background-color: var.$light-grey;
+  background: var.$light-grey;
   border-radius: 0 4px 4px 0;
 }
 
-.sum_wrapper {
+.sumWrapper {
+  grid-area: sumWrapper;
   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;
 }
 
 .price {
-  font-size: 13.5px;
-  color: var.$body-color-light-grey;
-  line-height: 1.2;
-  font-weight: 400;
+  font-size: 13px;
   white-space: nowrap;
 }
 
-.button_dots {
+.buttonDots {
   position: absolute;
   z-index: 90;
   top: 0;
@@ -125,33 +93,18 @@
   box-shadow: 0 0 20px rgba(170 189 206 /25%);
   border-radius: 5px;
   padding: 15px;
-  min-width: 228px;
+  width: 228px;
   transition:
     opacity 0.25s,
     visibility 0.25s;
-  z-index: 100;
+  z-index: z-index.$three;
 
   @include media.respond-to('large') {
     top: 60px;
     right: 0;
   }
 }
 
-.menu {
-  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;
-}
-
 .item {
   &:first-child {
     border-bottom: 1px solid var.$body-color-light-grey;
@@ -162,16 +115,18 @@
 
 .menu_button {
   font-size: 15px;
-  line-height: 1.2;
-  font-weight: 400;
-  margin:0;
+  line-height: 1;
   padding: 0;
 
   &:hover {
     color: var.$theme-primary-color;
   }
 }
 
-.arrowIcon {
-  rotate: 180deg;
+.arrowLeft {
+  rotate: 90deg;
+}
+
+.arrowRight {
+  rotate: 270deg;
 }