Merge pull request #66 from 001elijah/feachure-show-text

add show more text button for card description

package.json

@@ -29,6 +29,7 @@
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.13.0",
     "react-scripts": "5.0.1",
+    "react-show-more-text": "^1.6.2",
     "redux-persist": "^6.0.0",
     "sass": "^1.63.4",
     "shortid": "^2.2.16",

src/components/TaskCard/TaskCard.jsx

@@ -3,6 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import clsx from 'clsx';
 import shortid from 'shortid';
 import PropTypes from 'prop-types';
+import ShowMoreText from 'react-show-more-text';
 
 import sprite from '../../assets/icons/sprite.svg';
 import { removeCard, updateCard } from 'redux/Cards/cardsOperations';
@@ -74,7 +75,18 @@ export const TaskCard = ({
       ></div>
       <div className={s.infoWrapper}>
         <h4 className={clsx(s.title, s[theme])}>{title}</h4>
-        <p className={clsx(s.description, s[theme])}>{description}</p>
+
+        <ShowMoreText
+          lines={2}
+          more="more"
+          less="less"
+          anchorClass={clsx(s.showMoreAnchor, s[theme])}
+          expanded={false}
+          truncatedEndingComponent={'... '}
+          className={clsx(s.description, s[theme])}
+        >
+          {description}
+        </ShowMoreText>
       </div>
       <div className={clsx(s.controlPanel, s[theme])}>
         <div className={s.statusInfo}>

src/components/TaskCard/TaskCard.module.scss

@@ -6,7 +6,7 @@
   padding: 14px 21px;
   width: 335px;
   margin-right: 8px;
-  height: 154px;
+  height: max-content;
   background-color: $white-text-color;
   border-radius: 8px;
   overflow: hidden;
@@ -62,17 +62,29 @@
   line-height: 1.33;
   color: $icon-main-color;
 
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
   &.dark {
     color: $icon-secondary-color;
   }
 }
 
+.showMoreAnchor {
+  font-weight: 500;
+  color: $priority-high-color;
+  cursor: pointer;
+
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.colorful {
+    color: $accent-bright-color;
+  }
+
+  &:hover {
+    font-weight: 700;
+    transform: scale(1.04);
+    text-decoration: underline;
+  }
+}
+
 .controlPanel {
   padding-top: 14px;