Refactor trigger icon rendering in CollapsibleTrigger

Author: kotAPI

src/components/ui/Collapsible/fragments/CollapsibleTrigger.tsx

@@ -16,7 +16,7 @@ type CollapsibleTriggerProps = {
 const CollapsibleTrigger = ({ children, className, ...props }: CollapsibleTriggerProps) => {
     const { rootClass } = useContext(CollapsibleContext);
     const triggerClass = rootClass ? `${rootClass}-trigger` : '';
-    return <CollapsiblePrimitive.Trigger {...props} className={clsx(triggerClass, className)}>{children}</CollapsiblePrimitive.Trigger>;
+    return <CollapsiblePrimitive.Trigger className={clsx(triggerClass, className)} {...props}>{children}</CollapsiblePrimitive.Trigger>;
 };
 
 export default CollapsibleTrigger;

src/components/ui/Collapsible/stories/Collapsible.stories.tsx

@@ -24,15 +24,20 @@ const meta: Meta<typeof Collapsible> = {
 
 export default meta;
 
+const RightArrowIcon = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
+    return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>;
+};
+
 export const Default = () => {
     return (
         <section>
             <SandboxEditor className="">
-                <Collapsible.Root transitionDuration={100}>
-                    <Collapsible.Trigger>
+                <Collapsible.Root transitionDuration={100} className="group">
+                    <Collapsible.Trigger className="flex items-center gap-2">
                         <div>
                             Trigger
                         </div>
+                        <RightArrowIcon className='transition-transform duration-200 group-data-[state=open]:rotate-90'/>
                     </Collapsible.Trigger>
 
                     <Collapsible.Content className="space-y-2">