#182-bug-fix-CartPage

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

@@ -10,11 +10,7 @@
     background: var.$white;
     border-radius: 10px;
     height: 110px;
-    width: 400px;
-
-    @include media.respond-to('large') {
-        width: 75%;
-    }
+    width: 80%;
 }
 
 .frame {
@@ -47,14 +43,6 @@
     max-height: 80px;
 }
 
-.number {
-    margin: 0 0 5px;
-    font-size: 14px;
-    line-height: 1;
-    font-weight: 400;
-    color: var.$subtitle-color;
-}
-
 .name {
     display: flex;
     font-size: 15px;

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ProductEntity } from './ProductEntity'
+import image1 from '@/assets/images/product/2-500x500.webp'
+
+const meta = {
+  title: 'entities/ProductEntity',
+  component: ProductEntity,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof ProductEntity>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    src: image1,
+    name: 'Переходник',
+    article: '1229239192',
+    price: 782,
+    currency: '₽'
+  }
+}

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

@@ -1,6 +1,16 @@
 import { TProduct } from '@/mockData/productsData'
 import styles from './ProductEntity.module.scss'
 import { type FC } from 'react'
+import Subheading from '@/shared/ui/Subheading/Subheading'
+
+/**
+ * Компонент служит для отображения товаров, пришедших с сервера.
+ * @param {string} src-картика с изображением продукта;
+ * @param {string} name- название продукта;
+ * @param {string} article -артикул продукта;
+ * @param {number} price -стоимость продукта;
+ * @param {string} currency - валюта, в которой обозначена стоимость;
+ */
 
 export const ProductEntity: FC<TProduct> = product => {
   return (
@@ -9,7 +19,7 @@ export const ProductEntity: FC<TProduct> = product => {
         <img src={product.src} alt={'product'} className={styles.image} />
       </div>
       <div className={`${styles.description_wrapper}`}>
-        <span className={`${styles.number}`}>{product.article}</span>
+        <Subheading>{product.article}</Subheading>
         <a className={`${styles.name}`}>{product.name}</a>
       </div>
     </div>

src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss

@@ -29,11 +29,9 @@
 }
 
 .button_change {
-    background-color: inherit;
     border: none;
+    padding: 0;
     font-size: 14px;
-    line-height: 1.2;
-    font-weight: 400;
     color: var.$link-color;
 
     &:hover {
@@ -58,32 +56,21 @@
     }
 }
 
-.input {
-    width: 100%;
-    background: inherit;
-    font-size: 14px;
-    line-height: 24px;
-    font-weight: 400;
-    color: var.$black;
-    appearance: none;
-    transition: 0.25s;
+.form>.input {
+    margin-left: 0;
 
     &::placeholder {
         color: var.$body-color-light-grey;
     }
+
 }
 
 .button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 108px;
     height: 36px;
     padding: 5px 20px;
     background: var.$light-grey;
     color: var.$black;
     font-size: 14px;
-    border-radius: 5px;
     font-weight: 700;
 
     &:hover {

src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { CartCouponApply } from './CartCouponApply'
+
+const meta = {
+  title: 'features/CartCouponApply',
+  component: CartCouponApply,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof CartCouponApply>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {}
+}

src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.tsx

@@ -1,11 +1,18 @@
 import { useState } from 'react'
 import styles from './CartCouponApply.module.scss'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import { Input, InputSize, InputTheme } from '@/shared/ui/Input/Input'
+import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
 
 const states = {
   CERTIFICATE: 'CERTIFICATE',
   COUPON: 'COUPON'
 }
 
+/**
+ * Компонент нужен для применения купона или сертификата на скидку.
+ */
+
 export const CartCouponApply: React.FC = () => {
   const [value, setValue] = useState(states.CERTIFICATE)
 
@@ -24,14 +31,21 @@ export const CartCouponApply: React.FC = () => {
   return (
     <div className={styles.container}>
       <div className={styles.wrapper}>
-        <h4 className={styles.title}>{title}</h4>
-        <button className={styles.button_change} onClick={changeCouponToCertificate}>
+        <Heading type={HeadingType.SMALL}>{title}</Heading>
+        <Button className={styles.button_change} onClick={changeCouponToCertificate}>
           {buttonText}
-        </button>
+        </Button>
       </div>
       <form className={styles.form}>
-        <input type="text" name="coupon" placeholder={placeholder} className={styles.input}></input>
-        <button className={styles.button}>Применить</button>
+        <Input
+          placeholder={placeholder}
+          theme={InputTheme.LIGHT}
+          customSize={InputSize.S}
+          className={styles.input}
+        />
+        <Button theme={ButtonTheme.SECONDARY} size={ButtonSize.XS} className={styles.button}>
+          Применить
+        </Button>
       </form>
     </div>
   )

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

@@ -4,7 +4,8 @@
 .container {
     display: flex;
     align-items: center;
-    width: 938px;
+    width: 100%;
+    min-width: 500px;
     height: 140px;
     background-color: var.$white;
     border-radius: 10px;
@@ -89,8 +90,8 @@
 .sum_wrapper {
     display: flex;
     flex-direction: column;
-    padding-left: 5%;
-    margin-right: 10%;
+    padding-left: 3%;
+    margin-right: 5%;
 
     @include media.respond-to('large') {
         width: 25%;
@@ -99,8 +100,6 @@
 
 .sum {
     font-size: 18px;
-    line-height: 1.2;
-    font-weight: 400;
     white-space: nowrap;
 }
 
@@ -117,4 +116,56 @@
     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;
+    }
+}
+
+.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;
+        margin-bottom: 15px;
+        padding-bottom: 15px;
+    }
+}
+
+.menu_button {
+    font-size: 15px;
+    line-height: 1.2;
+    font-weight: 400;
+
+    &:hover {
+        color: var.$theme-primary-color;
+    }
 }

src/features/CartEdit/ui/CartEdit/CartEdit.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { CartEdit, TCartEditProps } from './CartEdit'
+import image1 from '@/assets/images/product/2-500x500.webp'
+import { FC } from 'react'
+
+const CartEditWrapper: FC<TCartEditProps> = props => {
+  return (
+    <div style={{ width: '800px' }}>
+      <CartEdit {...props} />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'features/CartEdit',
+  component: CartEditWrapper,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof CartEditWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    product: {
+      article: '1866887687',
+      quantity: 1,
+      src: image1,
+      name: 'Переходник',
+      price: 1634,
+      currency: 'RUB'
+    },
+    decreaseQuantity: () => {},
+    increaseQuantity: () => {},
+    setQuantity: () => {},
+    removeProduct: () => {}
+  }
+}