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 && ( {role} )} - {description && {description}} + {description && description.length > 110 ? ( + + {description} + + ) : ( + {description} + )} {children} 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 (

“{isReadMore ? `${text.slice(0, textMaxLength)}...` : text}” + {renderBreak &&
} {isReadMore ? ' Show more' : ' Show less'} 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; +}