CORE-4997: add rerad more (#1227) (#1228)

oacore · Sep 25, 2024 · 3835995 · 3835995
1 parent 44cf1f6
commit 3835995
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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
@@ -28,3 +28,7 @@
   color: var(--primary);
   text-decoration: underline;
 }
+
+.render-break {
+  margin-left: 0;
+}