feat: CollapsibleBox accepts IconName for customisation of the chevron

trezor · Nov 27, 2024 · 4c9214d · 4c9214d
1 parent dc66d2f
commit 4c9214d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/packages/components/src/components/CollapsibleBox/CollapsibleBox.stories.tsx b/packages/components/src/components/CollapsibleBox/CollapsibleBox.stories.tsx
@@ -6,6 +6,7 @@ import {
 } from './CollapsibleBox';
 import { paddingTypes, fillTypes, headingSizes } from './types';
 import { getFramePropsStory } from '../../utils/frameProps';
+import { variables } from '../../config';
 
 const meta: Meta = {
     title: 'CollapsibleBox',
@@ -60,6 +61,16 @@ export const CollapsibleBox: StoryObj = {
             type: 'string',
         },
         toggleComponent: { control: { disable: true } },
+        toggleIconName: {
+            options: ['none', ...variables.ICONS],
+            mapping: {
+                ...variables.ICONS,
+                none: undefined,
+            },
+            control: {
+                type: 'select',
+            },
+        },
         children: { control: { disable: true } },
         ...getFramePropsStory(allowedCollapsibleBoxFrameProps).argTypes,
     },

diff --git a/packages/components/src/components/CollapsibleBox/CollapsibleBox.tsx b/packages/components/src/components/CollapsibleBox/CollapsibleBox.tsx
@@ -12,7 +12,7 @@ import {
     spacings,
 } from '@trezor/theme';
 
-import { Icon } from '../Icon/Icon';
+import { Icon, IconName } from '../Icon/Icon';
 import { Row, Column } from '../Flex/Flex';
 import { Text } from '../typography/Text/Text';
 import { motionEasing } from '../../config/motion';
@@ -77,6 +77,7 @@ export type CollapsibleBoxProps = AllowedFrameProps & {
     fillType?: FillType;
     toggleLabel?: ReactNode;
     toggleComponent?: ReactNode;
+    toggleIconName?: IconName;
     children?: ReactNode;
     hasDivider?: boolean;
     onAnimationComplete?: (isOpen: boolean) => void;
@@ -155,6 +156,7 @@ export const CollapsibleBox = ({
     defaultIsOpen = false,
     toggleLabel,
     toggleComponent,
+    toggleIconName = 'caretCircleDown',
     paddingType = 'normal',
     heading,
     subHeading,
@@ -209,7 +211,7 @@ export const CollapsibleBox = ({
                     <IconWrapper $isCollapsed={!isOpen}>
                         {toggleComponent ?? (
                             <Icon
-                                name="caretCircleDown"
+                                name={toggleIconName}
                                 size={mapSizeToIconSize({ $headingSize: headingSize })}
                                 data-testid={`@collapsible-box/icon-${isOpen ? 'expanded' : 'collapsed'}`}
                                 variant="tertiary"