Skip to content

Migrate Accordion and DocTable components to ShadCN +2 issues resolved #1742

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
merged 7 commits into from
Jul 28, 2025
Merged

Migrate Accordion and DocTable components to ShadCN +2 issues resolved #1742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a3763c1
adapting DocTable to shadcn and adding tests
idanidan29 Jun 28, 2025
c94c533
adapting accordion to shadcn and adding tests
idanidan29 Jun 28, 2025
3d94db0
adjusting carbon ads to dark mode
idanidan29 Jun 28, 2025
7275756
format adjustments
idanidan29 Jun 28, 2025
8276d49
fromat adjustments
idanidan29 Jun 28, 2025
efac2dc
add tests for full coverage
idanidan29 Jun 28, 2025
5130730
adjusting the mouse pointer to show the hand icon
idanidan29 Jul 17, 2025
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
161 changes: 103 additions & 58 deletions components/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
/* eslint-disable linebreak-style */
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible';
import { cn } from '@/lib/utils';

interface AccordionItem {
question: string;
Expand All @@ -12,84 +19,122 @@ interface AccordionProps {
}

const Accordion: React.FC<AccordionProps> = ({ items }) => {
const [activeIndex, setActiveIndex] = useState<number | null>(null);
const [openItems, setOpenItems] = useState<Set<number>>(new Set());
const router = useRouter();

const handleToggle = (index: number) => {
setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
const handleToggle = (id: number) => {
setOpenItems((prev) => {
const newSet = new Set(prev);
if (newSet.has(id)) {
newSet.delete(id);
} else {
newSet.add(id);
}
return newSet;
});
};

useEffect(() => {
const hash = router.asPath.split('#')[1];
if (hash) {
const id = parseInt(hash, 10);
const index = items.findIndex((item) => item.id === id);
if (index !== -1) {
setActiveIndex(index);

setTimeout(() => {
const element = document.getElementById(hash);
if (element) {
const navbarHeight = 150;
const offset = element.offsetTop - navbarHeight;
window.scrollTo({ top: offset, behavior: 'smooth' });
}
}, 0);
const item = items.find((item) => item.id === id);
if (item) {
setOpenItems(new Set([id]));
}
}
}, [items, router.asPath]);

const handleLinkClick = (id: number) => {
const index = items.findIndex((item) => item.id === id);
setActiveIndex(index);

const newUrl = `#${id}`;
router.push(newUrl, undefined, { shallow: true });
};

return (
<div>
{items.map((item, index) => (
<div
<div className='w-full space-y-1'>
{items.map((item) => (
<Collapsible
key={item.id}
className={`overflow-hidden transition-max-height border-t-2 ${
activeIndex === index ? 'max-h-96' : 'max-h-20'
} ${index === items.length - 1 ? 'border-b-2' : ''}`}
open={openItems.has(item.id)}
onOpenChange={() => handleToggle(item.id)}
className='w-full'
data-test={`accordion-item-${item.id}`}
>
<div className='flex justify-between p-4 pl-2 cursor-pointer'>
<div className='text-[20px]'>
<a
href={`#${item.id}`}
onClick={(e) => {
e.preventDefault();
handleLinkClick(item.id);
}}
data-test={`accordion-question-${item.id}`}
>
{item.question}
</a>
</div>
<div
className={`transform transition-transform duration-200 max-h-7 text-[20px] ${
activeIndex === index ? 'rotate-45' : ''
}`}
onClick={() => handleToggle(index)}
<div
className={cn(
'border border-border dark:border-[#bfdbfe] rounded-lg transition-colors',
openItems.has(item.id) &&
'border-primary/50 bg-[#e2e8f0] dark:bg-[#0f172a]',
)}
>
<CollapsibleTrigger
asChild
className='w-full'
data-test={`accordion-toggle-${item.id}`}
>
&#43;
</div>
</div>
{activeIndex === index && (
<div
id={`${item.id}`}
className='p-2 text-gray-500 dark:text-slate-200 pb-4'
<div className='flex items-center justify-between w-full p-4 text-left hover:bg-muted/50 transition-colors rounded-lg'>
<div className='flex-1'>
<a
href={`#${item.id}`}
onClick={(e) => {
const isCurrentlyOpen = openItems.has(item.id);
if (isCurrentlyOpen) {
// If open, just close it without navigation
e.preventDefault();
handleToggle(item.id);
} else {
// If closed, open it and scroll to a position a few pixels higher
e.preventDefault();
handleToggle(item.id);
setTimeout(() => {
const element = document.getElementById(`${item.id}`);
if (element) {
const navbarHeight = 150;
const offset =
element.offsetTop - navbarHeight - 20; // 20px higher
window.scrollTo({
top: offset,
behavior: 'smooth',
});
}
}, 100);
}
}}
className={cn(
'text-lg font-medium text-foreground transition-all duration-200 dark:hover:text-[#bfdbfe] hover:text-lg hover:text-blue-600',
openItems.has(item.id) &&
'text-primary dark:text-[#bfdbfe]',
)}
data-test={`accordion-question-${item.id}`}
>
{item.question}
</a>
</div>
<div className='ml-4 flex-shrink-0'>
<div
className={cn(
'w-6 h-6 rounded-full border-2 border-border flex items-center justify-center transition-all duration-200 cursor-pointer',
openItems.has(item.id)
? 'border-primary bg-primary text-white rotate-45 dark:bg-[#bfdbfe] dark:text-black dark:border-[#bfdbfe]'
: 'hover:border-primary/50',
)}
>
<span className='text-sm font-bold leading-none'>
{openItems.has(item.id) ? '×' : '+'}
</span>
</div>
</div>
</div>
</CollapsibleTrigger>

<CollapsibleContent
className='overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down'
data-test={`accordion-answer-${item.id}`}
>
{item.answer}
</div>
)}
</div>
<div
id={`${item.id}`}
className='px-4 pb-4 text-muted-foreground leading-relaxed'
>
{item.answer}
</div>
</CollapsibleContent>
</div>
</Collapsible>
))}
</div>
);
Expand Down
94 changes: 70 additions & 24 deletions components/CarbonsAds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,46 +74,92 @@ CarbonAds.stylesheet = {
#carbonads {
padding: 0.5rem;
margin: 2rem auto;
background-color: #f9f9f9;
border: 1px dashed;
border-color: #cacaca;
background-color: #ffffff;
border: 1px dashed #e5e7eb;
box-sizing: border-box;
border-radius: 10px;
max-width: 300px;
transition: background-color 0.3s ease, color 0.3s ease;
}

#carbonads > span {
width: 100%;
height: fit-content;
display: flex;
flex-direction: column;
#carbonads .carbon-wrap {
background-color: #f9f9f9 !important;
}

.carbon-wrap {
flex: 1;
display: inline-flex;
flex-direction: row;
#carbonads .carbon-text,
#carbonads .carbon-poweredby {
background-color: inherit !important;
color: #374151 !important;
}

.carbon-img {
margin: auto;
#carbonads .carbon-text {
font-size: 12px;
font-family: Inter, ui-sans-serif, system-ui;
line-height: 1.4;
}

.carbon-img > img {
align-self: stretch;
margin-right: 0.75rem;
#carbonads .carbon-img {
text-align: center;
margin: 0 auto 8px;
}

.carbon-text {
font-size: 12px;
font-family: Inter, ui-sans-serif, system-ui;
color: rgb(100 116 139);
#carbonads .carbon-img img {
display: inline-block;
margin: 0 auto;
filter: brightness(1);
border: 1px solid #e5e7eb !important;
background-color: #f9fafb !important;
border-radius: 4px;
}

.carbon-poweredby {
font-size: 12px;
#carbonads .carbon-poweredby {
font-size: 11px !important;
text-align: center !important;
display: block;
margin-top: 4px;
color: rgb(100 116 139);
color: #6b7280 !important;
}

#carbonads a {
color: #2563eb !important;
text-decoration: none !important;
}

#carbonads a:hover {
color: #1d4ed8 !important;
}

/* Dark mode overrides */
.dark #carbonads {
background-color: rgb(30 41 59) !important;
border-color: rgb(51 65 85) !important;
}

.dark #carbonads .carbon-text,
.dark #carbonads .carbon-poweredby {
color: #f1f5f9 !important;
}

.dark #carbonads .carbon-poweredby {
color: #94a3b8 !important;
}

.dark #carbonads a {
color: #7dd3fc !important;
}

.dark #carbonads .carbon-wrap {
background-color: #0f172a !important;
}

.dark #carbonads a:hover {
color: #e2e8f0 !important;
}

.dark #carbonads .carbon-img img {
filter: brightness(0.9) contrast(1.1);
border-color: rgb(51 65 85) !important;
background-color: rgb(15 23 42) !important;
}

@media (max-width: 1023px) {
Expand Down
Loading