From 972481dd902f2b7786bf3c0713b95f26035c8d56 Mon Sep 17 00:00:00 2001
From: gndz07 <ginadzani@gmail.com>
Date: Mon, 16 Sep 2024 17:12:46 +0200
Subject: [PATCH 1/3] feat: allow no trigger icon

---
 components/Accordion/Accordion.stories.tsx | 24 ++++++++++++++++++++++
 components/Accordion/Accordion.tsx         | 18 +++++++++-------
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/components/Accordion/Accordion.stories.tsx b/components/Accordion/Accordion.stories.tsx
index a48dc0ff..1e036cae 100644
--- a/components/Accordion/Accordion.stories.tsx
+++ b/components/Accordion/Accordion.stories.tsx
@@ -83,6 +83,30 @@ MultipleCollapsible.argTypes = {
   },
 };
 
+export const DisabledItem: StoryFn<typeof AccordionForStory> = (args) => (
+  <Box css={{ width: 300 }}>
+    <AccordionForStory {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Item1 Trigger</AccordionTrigger>
+        <AccordionContent>Item1 Content</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger disabled noIcon>
+          Disabled item
+        </AccordionTrigger>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Item3 Trigger</AccordionTrigger>
+        <AccordionContent>Item3 Content</AccordionContent>
+      </AccordionItem>
+    </AccordionForStory>
+  </Box>
+);
+DisabledItem.args = {
+  type: 'multiple',
+  collapsible: true,
+};
+
 export const Complex: StoryFn<typeof AccordionForStory> = (args) => (
   <Box css={{ width: 300 }}>
     <AccordionForStory {...args}>
diff --git a/components/Accordion/Accordion.tsx b/components/Accordion/Accordion.tsx
index 36285feb..7b1fbbcb 100644
--- a/components/Accordion/Accordion.tsx
+++ b/components/Accordion/Accordion.tsx
@@ -4,6 +4,7 @@ import { ChevronRightIcon } from '@radix-ui/react-icons';
 import React from 'react';
 
 import { CSS, keyframes, styled, VariantProps } from '../../stitches.config';
+import { Box } from '../Box';
 import { elevationVariants } from '../Elevation';
 
 const open = keyframes({
@@ -67,10 +68,12 @@ export const StyledAccordionTrigger = styled(AccordionPrimitive.Trigger, {
     boxShadow: 'inset 0 0 0 1px $colors$accordionActiveShadow',
   },
   '@hover': {
-    '&:hover': {
-      cursor: 'pointer',
-      '&::before': {
-        backgroundColor: '$accordionHoverShadow',
+    '&:not([disabled])': {
+      '&:hover': {
+        cursor: 'pointer',
+        '&::before': {
+          backgroundColor: '$accordionHoverShadow',
+        },
       },
     },
   },
@@ -139,15 +142,16 @@ export const AccordionItem = StyledAccordionItem as any;
 export type AccordionTriggerProps = React.ComponentProps<typeof StyledAccordionTrigger> &
   VariantProps<typeof StyledAccordionTrigger> & {
     children: React.ReactNode;
+    noIcon?: boolean;
   };
 export const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof StyledAccordionTrigger>,
   AccordionTriggerProps
->(({ children, ...props }, forwardedRef) => (
+>(({ children, noIcon = false, ...props }, forwardedRef) => (
   <StyledAccordionHeader>
     <StyledAccordionTrigger ref={forwardedRef} {...props}>
-      <StyledAccordionChevron aria-hidden />
-      {children}
+      {!noIcon && <StyledAccordionChevron aria-hidden />}
+      <Box css={{ ml: noIcon ? '$5' : 0, width: '100%' }}>{children}</Box>
     </StyledAccordionTrigger>
   </StyledAccordionHeader>
 ));

From adf6664384f04fe7a50ffb9fea4e4b36dcb6b79d Mon Sep 17 00:00:00 2001
From: gndz07 <ginadzani@gmail.com>
Date: Mon, 16 Sep 2024 17:20:50 +0200
Subject: [PATCH 2/3] feat: allow custom trigger icon

---
 components/Accordion/Accordion.stories.tsx |  8 ++++----
 components/Accordion/Accordion.tsx         | 13 +++++++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/components/Accordion/Accordion.stories.tsx b/components/Accordion/Accordion.stories.tsx
index 1e036cae..21ab493c 100644
--- a/components/Accordion/Accordion.stories.tsx
+++ b/components/Accordion/Accordion.stories.tsx
@@ -1,4 +1,4 @@
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { BookmarkIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
 
@@ -83,7 +83,7 @@ MultipleCollapsible.argTypes = {
   },
 };
 
-export const DisabledItem: StoryFn<typeof AccordionForStory> = (args) => (
+export const DisabledAndCustomTrigger: StoryFn<typeof AccordionForStory> = (args) => (
   <Box css={{ width: 300 }}>
     <AccordionForStory {...args}>
       <AccordionItem value="item-1">
@@ -96,13 +96,13 @@ export const DisabledItem: StoryFn<typeof AccordionForStory> = (args) => (
         </AccordionTrigger>
       </AccordionItem>
       <AccordionItem value="item-3">
-        <AccordionTrigger>Item3 Trigger</AccordionTrigger>
+        <AccordionTrigger customIcon={<BookmarkIcon />}>Custom Icon</AccordionTrigger>
         <AccordionContent>Item3 Content</AccordionContent>
       </AccordionItem>
     </AccordionForStory>
   </Box>
 );
-DisabledItem.args = {
+DisabledAndCustomTrigger.args = {
   type: 'multiple',
   collapsible: true,
 };
diff --git a/components/Accordion/Accordion.tsx b/components/Accordion/Accordion.tsx
index 7b1fbbcb..e9be68af 100644
--- a/components/Accordion/Accordion.tsx
+++ b/components/Accordion/Accordion.tsx
@@ -142,15 +142,24 @@ export const AccordionItem = StyledAccordionItem as any;
 export type AccordionTriggerProps = React.ComponentProps<typeof StyledAccordionTrigger> &
   VariantProps<typeof StyledAccordionTrigger> & {
     children: React.ReactNode;
+    customIcon?: React.ReactNode;
     noIcon?: boolean;
   };
 export const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof StyledAccordionTrigger>,
   AccordionTriggerProps
->(({ children, noIcon = false, ...props }, forwardedRef) => (
+>(({ children, noIcon = false, customIcon, ...props }, forwardedRef) => (
   <StyledAccordionHeader>
     <StyledAccordionTrigger ref={forwardedRef} {...props}>
-      {!noIcon && <StyledAccordionChevron aria-hidden />}
+      {!noIcon ? (
+        customIcon ? (
+          <Box css={{ mr: '$2', c: '$accordionText' }} aria-hidden>
+            {customIcon}
+          </Box>
+        ) : (
+          <StyledAccordionChevron aria-hidden />
+        )
+      ) : null}
       <Box css={{ ml: noIcon ? '$5' : 0, width: '100%' }}>{children}</Box>
     </StyledAccordionTrigger>
   </StyledAccordionHeader>

From e8c75dbf3a6ca62a8c259d3fc4164b594e5c5b96 Mon Sep 17 00:00:00 2001
From: gndz07 <ginadzani@gmail.com>
Date: Mon, 16 Sep 2024 17:22:48 +0200
Subject: [PATCH 3/3] fix: arg type

---
 components/Accordion/Accordion.stories.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/Accordion/Accordion.stories.tsx b/components/Accordion/Accordion.stories.tsx
index 21ab493c..29d2aee8 100644
--- a/components/Accordion/Accordion.stories.tsx
+++ b/components/Accordion/Accordion.stories.tsx
@@ -61,7 +61,7 @@ Large.args = {
 export const Collapsible: StoryFn<typeof AccordionForStory> = Template.bind({});
 Collapsible.args = {
   type: 'single',
-  collapsible: true,
+  collapsible: 'true',
 };
 Collapsible.argTypes = {
   size: {
@@ -73,8 +73,7 @@ Collapsible.argTypes = {
 export const MultipleCollapsible: StoryFn<typeof AccordionForStory> = Template.bind({});
 MultipleCollapsible.args = {
   type: 'multiple',
-  // @FIXME console warning of this props not being a boolean attribute
-  collapsible: true,
+  collapsible: 'true',
 };
 MultipleCollapsible.argTypes = {
   size: {
@@ -104,7 +103,7 @@ export const DisabledAndCustomTrigger: StoryFn<typeof AccordionForStory> = (args
 );
 DisabledAndCustomTrigger.args = {
   type: 'multiple',
-  collapsible: true,
+  collapsible: 'true',
 };
 
 export const Complex: StoryFn<typeof AccordionForStory> = (args) => (
@@ -136,7 +135,7 @@ export const Complex: StoryFn<typeof AccordionForStory> = (args) => (
 
 Complex.args = {
   type: 'multiple',
-  collapsible: true,
+  collapsible: 'true',
 };
 Complex.argTypes = {
   size: {
@@ -202,7 +201,7 @@ export const InsideModal: StoryFn<typeof AccordionForStory> = (args) => {
 
 InsideModal.args = {
   type: 'multiple',
-  collapsible: true,
+  collapsible: 'true',
 };
 InsideModal.argTypes = {
   size: {