Merge pull request #3558 from bettyblocks/feat/add-options-for-icon-p…

…osition-color-expansion-panel-PFR-952 feat: add icon, icon position and icon color options to expansion panel PFR-952
bettyblocks · Dec 30, 2024 · bfccea1 · bfccea1
2 parents d5d1b3e + 8f4db94
commit bfccea1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/components/expansionPanel.js b/src/components/expansionPanel.js
@@ -21,6 +21,8 @@
       square,
       variant,
       elevation,
+      icon,
+      iconPosition,
       dataComponentAttribute,
       preLoadData,
     } = options;
@@ -92,7 +94,10 @@
 
     const panelSummaryOptions = {
       onClick,
-      expandIcon: <Icon name="ExpandMore" />,
+      expandIcon: <Icon name={icon} />,
+      IconButtonProps: {
+        edge: iconPosition,
+      },
     };
 
     const ShowChilderen = <>{dataShown || isDev ? children : ''}</>;
@@ -227,6 +232,13 @@
           marginLeft: ({ options: { outerSpacing } }) =>
             getSpacing(outerSpacing[3], 'Desktop'),
         },
+        '& .MuiExpansionPanelSummary-root': {
+          flexDirection: ({ options: { iconPosition } }) =>
+            iconPosition === 'start' && 'row-reverse',
+        },
+        '& .MuiExpansionPanelSummary-expandIcon': {
+          color: ({ options: { iconColor } }) => style.getColor(iconColor),
+        },
       },
       empty: {
         display: 'flex',

diff --git a/src/prefabs/structures/ExpansionPanel/options/index.ts b/src/prefabs/structures/ExpansionPanel/options/index.ts
@@ -4,6 +4,9 @@ import {
   option,
   showIf,
   sizes,
+  icon,
+  color,
+  ThemeColor,
 } from '@betty-blocks/component-sdk';
 import { styles } from './styles';
 import { advanced } from '../../advanced';
@@ -73,6 +76,20 @@ export const expansionPanelOptions = {
       condition: showIf('variant', 'EQ', 'elevation'),
     },
   }),
+  icon: icon('Icon', { value: 'ExpandMore' }),
+  iconPosition: option('CUSTOM', {
+    label: 'Icon position',
+    value: 'end',
+    configuration: {
+      as: 'BUTTONGROUP',
+      dataType: 'string',
+      allowedInput: [
+        { name: 'Start', value: 'start' },
+        { name: 'End', value: 'end' },
+      ],
+    },
+  }),
+  iconColor: color('Icon color', { value: ThemeColor.DARK }),
   ...styles,
 
   outerSpacing: sizes('Outer space', {