[CPT-2535] Add property to place accordion icon on the left

toptal · Sep 3, 2024 · cbbb8e1 · cbbb8e1
1 parent 36688bf
commit cbbb8e1
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 11 deletions.
diff --git a/.changeset/dull-pots-love.md b/.changeset/dull-pots-love.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-accordion': minor
+---
+
+- add `expandIconPlacement` prop to Picasso Accordion
diff --git a/packages/base/Accordion/src/Accordion/Accordion.tsx b/packages/base/Accordion/src/Accordion/Accordion.tsx
@@ -18,6 +18,7 @@ import { AccordionDetails } from '../AccordionDetails'
 import styles from './styles'
 
 export type Borders = 'all' | 'middle' | 'none'
+export type ExpandIconPlacement = 'left' | 'right'
 
 const useStyles = makeStyles<Theme>(styles, {
   name: 'PicassoAccordion',
@@ -44,6 +45,8 @@ export interface Props
   disabled?: boolean
   /** Customize icon indicating expanded status */
   expandIcon?: ReactElement
+  /** Customize icon placement */
+  expandIconPlacement?: ExpandIconPlacement
   /** Defines where the horizontal borders show */
   borders?: Borders
   /** Callback invoked when `Accordion` item is toggled */
@@ -75,6 +78,7 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
     expanded,
     defaultExpanded,
     expandIcon,
+    expandIconPlacement = 'right',
     borders,
     disabled,
     className,
@@ -110,6 +114,22 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
 
   const appliedBorders = children || expanded ? (borders as Borders) : 'none'
 
+  const renderExpandIcon = (expandIconPosition: 'left' | 'right') => {
+    if (expandIcon) {
+      return decorateWithExpandIconClasses(expandIcon, expandIconClass)
+    }
+
+    return (
+      <div
+        className={`${classes.expandIconAlignTop} ${
+          expandIconPosition === 'left' ? classes.expandIconLeft : ''
+        }`}
+      >
+        <ButtonAction icon={<ArrowDownMinor16 className={expandIconClass} />} />
+      </div>
+    )
+  }
+
   return (
     <MUIAccordion
       {...rest}
@@ -129,22 +149,17 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
         <AccordionSummary
           classes={{
             root: classes.summary,
-            content: classes.content,
+            content: `${classes.content} ${
+              expandIconPlacement === 'left' ? classes.contentRight : ''
+            }`,
           }}
           expandIcon={null}
           onClick={handleSummaryClick}
           data-testid={testIds?.accordionSummary}
         >
+          {expandIconPlacement === 'left' && renderExpandIcon('left')}
           {children}
-          {expandIcon ? (
-            decorateWithExpandIconClasses(expandIcon, expandIconClass)
-          ) : (
-            <div className={classes.expandIconAlignTop}>
-              <ButtonAction
-                icon={<ArrowDownMinor16 className={expandIconClass} />}
-              />
-            </div>
-          )}
+          {expandIconPlacement === 'right' && renderExpandIcon('right')}
         </AccordionSummary>
       ) : (
         <EmptyAccordionSummary data-testid={testIds?.emptyAccordionSummary} />

diff --git a/packages/base/Accordion/src/Accordion/story/ExpandIconPlacement.example.tsx b/packages/base/Accordion/src/Accordion/story/ExpandIconPlacement.example.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Accordion, Grid } from '@toptal/picasso'
+
+const Example = () => (
+  <Grid>
+    <Grid.Item sm={6}>
+      <Accordion
+        expandIconPlacement='left'
+        defaultExpanded
+        content={<DetailsDogDefinitionPanel />}
+      >
+        <Accordion.Summary>What is a dog?</Accordion.Summary>
+      </Accordion>
+    </Grid.Item>
+  </Grid>
+)
+
+const DetailsDogDefinitionPanel = () => (
+  <Accordion.Details>
+    A dog is a type of domesticated animal. Known for its loyalty and
+    faithfulness, it can be found as a welcome guest in many households across
+    the world.
+  </Accordion.Details>
+)
+
+export default Example
diff --git a/packages/base/Accordion/src/Accordion/story/index.jsx b/packages/base/Accordion/src/Accordion/story/index.jsx
@@ -53,6 +53,15 @@ page
     },
     'base/Accordion'
   )
+  .addExample(
+    'Accordion/story/ExpandIconPlacement.example.tsx',
+    {
+      title: 'Expand Icon Placement',
+      description:
+        'Accordion expand icon is placed to the right until the `expandIconPlacement` prop is set to `left`.',
+    },
+    'base/Accordion'
+  )
   .addExample(
     'Accordion/story/BorderedGroups.example.tsx',
     {

diff --git a/packages/base/Accordion/src/Accordion/styles.ts b/packages/base/Accordion/src/Accordion/styles.ts
@@ -78,6 +78,9 @@ export default ({ palette, typography }: Theme) => {
       height: '1.5em',
       alignSelf: 'flex-start',
     },
+    expandIconLeft: {
+      marginRight: '0.5em',
+    },
     summary: {
       color: palette.common.black,
     },
@@ -99,7 +102,9 @@ export default ({ palette, typography }: Theme) => {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      lineHeight: '1.5em',
+    },
+    contentRight: {
+      justifyContent: 'normal',
     },
   })
 }