fix: use tooltip and disable expanding accordion for empty description

Tivix · Jul 2, 2024 · 30476bd · 30476bd
1 parent e7e6f80
commit 30476bd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/frontend/src/components/common/AccordionList/AccordionList.interface.ts b/frontend/src/components/common/AccordionList/AccordionList.interface.ts
@@ -8,4 +8,5 @@ export interface AccordionListProps {
 
 export interface AccordionListItemProps {
   title: string;
+  noContentTooltipText: string;
 }
diff --git a/frontend/src/components/common/AccordionList/AccordionList.tsx b/frontend/src/components/common/AccordionList/AccordionList.tsx
@@ -6,7 +6,7 @@ export const AccordionList = ({ items }: PropsWithChildren<AccordionListProps>)
   return (
     <div className="flex flex-col">
       {items.map(({ title, children, key }) => (
-        <AccordionListItem key={key} title={title}>
+        <AccordionListItem key={key} title={title} noContentTooltipText="There's no description for this skill.">
           {children}
         </AccordionListItem>
       ))}

diff --git a/frontend/src/components/common/AccordionList/AccordionListItem.tsx b/frontend/src/components/common/AccordionList/AccordionListItem.tsx
@@ -2,28 +2,40 @@ import { PropsWithChildren, useState } from 'react';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { generateClassNames } from '@app/utils';
 import { AccordionListItemProps } from './AccordionList.interface';
+import { Tooltip } from '@app/components/common/Tooltip';
 
-export const AccordionListItem = ({ title, children }: PropsWithChildren<AccordionListItemProps>) => {
+export const AccordionListItem = ({
+  title,
+  noContentTooltipText,
+  children,
+}: PropsWithChildren<AccordionListItemProps>) => {
   const [isOpen, setOpen] = useState(false);
+  const disableExpand = !children;
+
+  const handleClick = () => {
+    setOpen((prevState) => !prevState);
+  };
 
   return (
     <div className="border-b border-b-navy-200 px-2 py-4">
       <h3>
         <button
           type="button"
           className={generateClassNames('flex w-full items-center justify-between', { 'cursor-auto': !children })}
-          onClick={() => setOpen(!isOpen)}
+          onClick={disableExpand ? undefined : handleClick}
         >
           <span className="text-left text-base font-medium text-navy-600">{title}</span>
-          <div className="flex min-h-10 min-w-10 items-center justify-center">
-            {children ? (
-              <ChevronRightIcon className={generateClassNames('rotate-90 text-navy-500', { '-rotate-90': isOpen })} />
-            ) : undefined}
-          </div>
+          <Tooltip tooltipText={noContentTooltipText}>
+            <div
+              className={`flex min-h-10 min-w-10 cursor-pointer items-center justify-center ${disableExpand ? 'text-navy-300' : 'text-navy-500'}`}
+            >
+              <ChevronRightIcon className={generateClassNames('rotate-90', { '-rotate-90': isOpen })} />
+            </div>
+          </Tooltip>
         </button>
       </h3>
       {children ? (
-        <div className={generateClassNames('mt-4 text-sm font-normal text-navy-600', { hidden: !isOpen })}>
+        <div className={`font-normal text-navy-600 duration-300 ${isOpen ? 'mt-4 h-auto text-sm' : 'h-0 text-[0px]'}`}>
           {children}
         </div>
       ) : undefined}