From 5b574c39d02376b65515d509540c5c178fe796fb Mon Sep 17 00:00:00 2001
From: ekachxaidze98 <65679299+ekachxaidze98@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:27:45 +0400
Subject: [PATCH] CORE-4997: add rerad more (#1227)

---
 components/team-member/index.jsx                         | 9 ++++++++-
 design-v2/components/testimonial/index.jsx               | 7 +++++--
 .../components/testimonial/testimonial-card.module.scss  | 4 ++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/team-member/index.jsx b/components/team-member/index.jsx
index b7c523934..4670a24fb 100644
--- a/components/team-member/index.jsx
+++ b/components/team-member/index.jsx
@@ -9,6 +9,7 @@ import {
 } from 'reactstrap'
 
 import styles from './team-member.module.scss'
+import { ReadMore } from '../../design-v2/components/testimonial'
 
 const TeamMember = ({
   className = '',
@@ -28,7 +29,13 @@ const TeamMember = ({
       {role && (
         <CardSubtitle className={styles.teamMemberRole}>{role}</CardSubtitle>
       )}
-      {description && <CardText>{description}</CardText>}
+      {description && description.length > 110 ? (
+        <ReadMore renderBreak textMaxLength={110}>
+          {description}
+        </ReadMore>
+      ) : (
+        <CardText>{description}</CardText>
+      )}
       {children}
     </CardBody>
   </Card>
diff --git a/design-v2/components/testimonial/index.jsx b/design-v2/components/testimonial/index.jsx
index b64f6d876..5b423a0c4 100644
--- a/design-v2/components/testimonial/index.jsx
+++ b/design-v2/components/testimonial/index.jsx
@@ -3,7 +3,7 @@ import classNames from '@oacore/design/lib/utils/class-names'
 
 import styles from './testimonial-card.module.scss'
 
-const ReadMore = ({ children, textMaxLength }) => {
+export const ReadMore = ({ children, textMaxLength, renderBreak }) => {
   const text = children
   const [isReadMore, setIsReadMore] = React.useState(true)
   const toggleReadMore = () => {
@@ -12,10 +12,13 @@ const ReadMore = ({ children, textMaxLength }) => {
   return (
     <p className={styles.citation}>
       “{isReadMore ? `${text.slice(0, textMaxLength)}...` : text}”
+      {renderBreak && <br />}
       <span
         onClick={toggleReadMore}
         role="presentation"
-        className={styles.readMore}
+        className={classNames.use(styles.readMore, {
+          [styles.renderBreak]: renderBreak,
+        })}
       >
         {isReadMore ? ' Show more' : ' Show less'}
       </span>
diff --git a/design-v2/components/testimonial/testimonial-card.module.scss b/design-v2/components/testimonial/testimonial-card.module.scss
index 30aca32d0..5b98dc7c1 100644
--- a/design-v2/components/testimonial/testimonial-card.module.scss
+++ b/design-v2/components/testimonial/testimonial-card.module.scss
@@ -28,3 +28,7 @@
   color: var(--primary);
   text-decoration: underline;
 }
+
+.render-break {
+  margin-left: 0;
+}