fix: актуализировал компонент RollUp в соответствии с задачей #216

Studio-Yandex-Practicum · Feb 26, 2024 · bfdb2ef · bfdb2ef
1 parent ca33f93
commit bfdb2ef
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/src/features/RollUp/RollUp.module.scss b/src/features/RollUp/RollUp.module.scss
@@ -19,12 +19,32 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid var.$bg-subscribe;
+    border-bottom: none;
     border-radius: 6px;
+    cursor: pointer;
+
+    &_rolledup {
+      border-bottom: 2px solid var.$bg-subscribe;
+    }
+  }
+
+  &__headertext {
+    font-size: 24px;
+    line-height: 1;
+    transition: all 0.5s;
+  }
+
+  &__header:hover &__headertext {
+    color: var.$header-color;
+  }
+
+  &__header:hover &__buttonicon path {
+    fill: var.$header-color;
   }
 
   &__rollupchild {
     padding: 30px;
+    padding-top: 0;
     border-bottom: 2px solid var.$bg-subscribe;
     border-radius: 6px;
     transition: all 0.5s;

diff --git a/src/features/RollUp/RollUp.tsx b/src/features/RollUp/RollUp.tsx
@@ -1,4 +1,4 @@
-import { useState, type FC } from 'react'
+import { useState, type FC, PropsWithChildren } from 'react'
 
 import IconArrowDown from '@/assets/icons/IconArrowDown.svg'
 import IconArrowUp from '@/assets/icons/IconArrowUp.svg'
@@ -11,7 +11,7 @@ import styles from './RollUp.module.scss'
  * Компонент разворачивающегося блока
  * @param {children} React.ReactNode - контент;
  */
-export const RollUp: FC<{ children: React.ReactNode }> = ({ children }) => {
+export const RollUp: FC<PropsWithChildren> = ({ children }) => {
   const [isRolledOut, setIsRolledOut] = useState(false)
 
   const onButtonClickHandl = () => {
@@ -20,15 +20,22 @@ export const RollUp: FC<{ children: React.ReactNode }> = ({ children }) => {
 
   return (
     <section className={styles.rollup}>
-      <div className={styles.rollup__header}>
-        <Heading type={HeadingType.NORMAL}>Описание</Heading>
+      <div
+        className={`${styles.rollup__header} ${!isRolledOut && styles.rollup__header_rolledup}`}
+        onClick={onButtonClickHandl}>
+        <Heading className={styles.rollup__headertext} type={HeadingType.NORMAL}>
+          Описание
+        </Heading>
         <Button
           design={ButtonDesign.SQUARE}
           size={ButtonSize.M}
           type="button"
-          className={styles.rollup__button}
-          onClick={onButtonClickHandl}>
-          {isRolledOut ? <IconArrowUp /> : <IconArrowDown />}
+          className={styles.rollup__button}>
+          {isRolledOut ? (
+            <IconArrowUp className={styles.rollup__buttonicon} />
+          ) : (
+            <IconArrowDown className={styles.rollup__buttonicon} />
+          )}
         </Button>
       </div>
       <div className={`${styles.rollup__rollupchild} ${!isRolledOut && styles.rollup__rollupchild_rolledup}`}>

diff --git a/src/pages/ProductPage/model/slice/productSlice.ts b/src/pages/ProductPage/model/slice/productSlice.ts
@@ -11,12 +11,12 @@ import { IObjectWithImage, TProduct, TProductSchema } from '../types/productType
 export const getProduct = createAsyncThunk<TProduct, string, ThunkConfig<ApiError>>(
   'product/getProduct',
   async (slug, thunkAPI) => {
-    //TO DO при разработке API (задача https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/217) использовать строки ниже
+    //TO DO при разработке API (задача #217) использовать строки ниже
     //const { rejectWithValue, extra } = thunkAPI
     const { rejectWithValue } = thunkAPI
 
     try {
-      //TO DO при разработке API (задача https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/217) использовать строки ниже
+      //TO DO при разработке API (задача #217) использовать строки ниже
       //const response = await extra.api.get(`api/${ApiRoutes.PRODUCT}/${slug}`)
       // return response.data.product
       const mockResponse = testProd