Skip to content

feat(ui): add collapsible partner cards and compress people cards layout #242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bhavabhuthi merged 1 commit into from
Mar 31, 2025
Merged

feat(ui): add collapsible partner cards and compress people cards layout #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 69 additions & 11 deletions app/[locale]/about-us/components/collaboratingPartner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,34 @@
import { useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import Image from 'next/image';
import { Button, Icon, Text } from 'opub-ui';

import {
CollaboratingPartnerHPText,
CollaboratingPartnerTextOne,
CollaboratingPartnerTextTwo,
} from '@/config/consts';
import { handleRedirect } from '@/lib/utils';
import Icons from '@/components/icons';
import { MediaRendering } from '@/components/media-rendering';

export function CollaboratingPartner() {
const [showMore, setShowMore] = useState(false);
const [isDescriptionLong, setIsDescriptionLong] = useState(false);

const descriptionRef = useRef<HTMLDivElement | null>(null);
const toggleShowMore = (event: React.MouseEvent) => {
event.preventDefault(); // Prevent link navigation
event.stopPropagation(); // Stop event from propagating to the card's link
setShowMore((prevState) => !prevState);
};

useEffect(() => {
if (descriptionRef.current) {
const isLong =
descriptionRef.current.scrollHeight >
descriptionRef.current.clientHeight;
setIsDescriptionLong(isLong);
}
}, []);
return (
<section
className="flex h-full flex-col flex-wrap py-14 "
Expand Down Expand Up @@ -73,12 +89,32 @@ export function CollaboratingPartner() {
</Text>

<div className="flex flex-col gap-5">
<Text variant="bodyLg" fontWeight="regular" color="default">
{CollaboratingPartnerTextOne}
</Text>
<Text variant="bodyLg" fontWeight="regular" color="default">
{CollaboratingPartnerTextTwo}
</Text>
<div>
<div
ref={descriptionRef}
className={!showMore ? ' line-clamp-2 lg:line-clamp-5' : ''}
>
<Text variant="bodyLg" fontWeight="regular" color="default">
{/* {CollaboratingPartnerTextOne} */}
{CollaboratingPartnerTextOne}
</Text>
</div>

{/* Only show the "Show more" button on medium and small screens */}
{isDescriptionLong && (
<div className="block md:hidden">
<Button
className="self-start p-2"
onClick={toggleShowMore}
variant="interactive"
size="slim"
kind="tertiary"
>
{showMore ? 'Show less' : 'Show more'}
</Button>
</div>
)}
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -132,9 +168,31 @@ export function CollaboratingPartner() {
</Text>

<div className="flex flex-col gap-5">
<Text variant="bodyLg" fontWeight="regular" color="default">
{CollaboratingPartnerHPText}
</Text>
<div>
<div
ref={descriptionRef}
className={!showMore ? ' line-clamp-2 lg:line-clamp-5' : ''}
>
<Text variant="bodyLg" fontWeight="regular" color="default">
{CollaboratingPartnerHPText}
</Text>
</div>

{/* Only show the "Show more" button on medium and small screens */}
{isDescriptionLong && (
<div className="block md:hidden">
<Button
className="self-start p-2"
onClick={toggleShowMore}
variant="interactive"
size="slim"
kind="tertiary"
>
{showMore ? 'Show less' : 'Show more'}
</Button>
</div>
)}
</div>
</div>
</div>
</div>
Expand Down
104 changes: 79 additions & 25 deletions app/[locale]/about-us/components/supportedBy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import Image from 'next/image';
import { Button, Icon, Text } from 'opub-ui';

import {
OpenContractingPartnershipTextOne,
OpenContractingPartnershipTextTwo,
PJMcPartnershipText,
TheRockefellerFoundationTextOne,
} from '@/config/consts';
Expand All @@ -14,6 +12,23 @@ import { MediaRendering } from '@/components/media-rendering';

export function SupportedBy() {
const [showMore, setShowMore] = useState(false);
const [isDescriptionLong, setIsDescriptionLong] = useState(false);

const descriptionRef = useRef<HTMLDivElement | null>(null);
const toggleShowMore = (event: React.MouseEvent) => {
event.preventDefault(); // Prevent link navigation
event.stopPropagation(); // Stop event from propagating to the card's link
setShowMore((prevState) => !prevState);
};

useEffect(() => {
if (descriptionRef.current) {
const isLong =
descriptionRef.current.scrollHeight >
descriptionRef.current.clientHeight;
setIsDescriptionLong(isLong);
}
}, []);
return (
<section
className="flex flex-col flex-wrap py-14 "
Expand All @@ -23,7 +38,7 @@ export function SupportedBy() {
<Text variant="heading2xl" fontWeight="bold" color="default" as="h2">
Supported By
</Text>
<div className="flex flex-wrap items-center justify-center gap-10 bg-baseIndigoSolid1 p-9 lg:flex-nowrap ">
<div className="flex flex-wrap items-center justify-center gap-10 rounded-2 bg-baseIndigoSolid1 p-9 lg:flex-nowrap ">
<div className="flex flex-col items-center gap-4 text-surfaceDefault">
<Image
src="/logo/Rockefeller.png"
Expand Down Expand Up @@ -75,28 +90,45 @@ export function SupportedBy() {
The Rockefeller Foundation
</Text>
<div className="flex flex-col gap-5">
<Text variant="bodyLg" fontWeight="regular" color="default">
{TheRockefellerFoundationTextOne}
</Text>
<Text variant="bodyLg" fontWeight="regular" color="default">
For more information, sign up for their newsletter at{' '}
<Button
size="large"
className="underline"
kind="tertiary"
variant="basic"
onClick={(event) =>
handleRedirect(event, 'https://rockefellerfoundation.org/')
}
<div>
<div
ref={descriptionRef}
className={!showMore ? ' line-clamp-2 lg:line-clamp-5' : ''}
>
rockefellerfoundation.org
</Button>{' '}
and follow them on X @RockefellerFdn.
</Text>
<Text variant="bodyLg" fontWeight="regular" color="default">
{TheRockefellerFoundationTextOne} For more information, sign
up for their newsletter at{' '}
<a
href="https://rockefellerfoundation.org/"
target="_blank"
rel="noopener noreferrer"
className="text-link underline"
>
rockefellerfoundation.org
</a>{' '}
and follow them on X @RockefellerFdn
</Text>
</div>

{/* Only show the "Show more" button on medium and small screens */}
{isDescriptionLong && (
<div className="block md:hidden">
<Button
className="self-start p-2"
onClick={toggleShowMore}
variant="interactive"
size="slim"
kind="tertiary"
>
{showMore ? 'Show less' : 'Show more'}
</Button>
</div>
)}
</div>
</div>
</div>
</div>
<div className="flex flex-wrap items-center justify-center gap-10 bg-baseIndigoSolid1 p-9 lg:flex-nowrap ">
<div className="flex flex-wrap items-center justify-center gap-10 rounded-2 bg-baseIndigoSolid1 p-9 lg:flex-nowrap ">
<div className="flex flex-col items-center gap-4 text-surfaceDefault">
<Image
src="/logo/PJMc.png"
Expand Down Expand Up @@ -148,9 +180,31 @@ export function SupportedBy() {
Patrick J. McGovern Foundation{' '}
</Text>
<div className="flex flex-col gap-5">
<Text variant="bodyLg" fontWeight="regular" color="default">
{PJMcPartnershipText}
</Text>
<div>
<div
ref={descriptionRef}
className={!showMore ? ' line-clamp-2 lg:line-clamp-5' : ''}
>
<Text variant="bodyLg" fontWeight="regular" color="default">
{PJMcPartnershipText}
</Text>
</div>

{/* Only show the "Show more" button on medium and small screens */}
{isDescriptionLong && (
<div className="block md:hidden">
<Button
className="self-start p-2"
onClick={toggleShowMore}
variant="interactive"
size="slim"
kind="tertiary"
>
{showMore ? 'Show less' : 'Show more'}
</Button>
</div>
)}
</div>
</div>
</div>
</div>
Expand Down
Loading