fix: accordion trigger disabled style and custom icon

traefik · Sep 16, 2024 · 6332ffa · 6332ffa
1 parent d24f80f
commit 6332ffa
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 13 deletions.
diff --git 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';
 
@@ -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: {
@@ -83,6 +82,30 @@ MultipleCollapsible.argTypes = {
   },
 };
 
+export const DisabledAndCustomTrigger: 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 customIcon={<BookmarkIcon />}>Custom Icon</AccordionTrigger>
+        <AccordionContent>Item3 Content</AccordionContent>
+      </AccordionItem>
+    </AccordionForStory>
+  </Box>
+);
+DisabledAndCustomTrigger.args = {
+  type: 'multiple',
+  collapsible: 'true',
+};
+
 export const Complex: StoryFn<typeof AccordionForStory> = (args) => (
   <Box css={{ width: 300 }}>
     <AccordionForStory {...args}>
@@ -112,7 +135,7 @@ export const Complex: StoryFn<typeof AccordionForStory> = (args) => (
 
 Complex.args = {
   type: 'multiple',
-  collapsible: true,
+  collapsible: 'true',
 };
 Complex.argTypes = {
   size: {
@@ -178,7 +201,7 @@ export const InsideModal: StoryFn<typeof AccordionForStory> = (args) => {
 
 InsideModal.args = {
   type: 'multiple',
-  collapsible: true,
+  collapsible: 'true',
 };
 InsideModal.argTypes = {
   size: {

diff --git 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,25 @@ 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, ...props }, forwardedRef) => (
+>(({ children, noIcon = false, customIcon, ...props }, forwardedRef) => (
   <StyledAccordionHeader>
     <StyledAccordionTrigger ref={forwardedRef} {...props}>
-      <StyledAccordionChevron aria-hidden />
-      {children}
+      {!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>
 ));