diff --git a/.changeset/dull-pots-love.md b/.changeset/dull-pots-love.md new file mode 100644 index 0000000000..a22d87f9c3 --- /dev/null +++ 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 index 21c8f578b5..3e36667906 100644 --- 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(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(function Accordion( expanded, defaultExpanded, expandIcon, + expandIconPlacement = 'right', borders, disabled, className, @@ -110,6 +114,23 @@ export const Accordion = forwardRef(function Accordion( const appliedBorders = children || expanded ? (borders as Borders) : 'none' + const renderExpandIcon = (expandIconPosition: 'left' | 'right') => { + if (expandIcon) { + return decorateWithExpandIconClasses(expandIcon, expandIconClass) + } + + return ( +
+ } /> +
+ ) + } + return ( (function Accordion( + {expandIconPlacement === 'left' && renderExpandIcon('left')} {children} - {expandIcon ? ( - decorateWithExpandIconClasses(expandIcon, expandIconClass) - ) : ( -
- } - /> -
- )} + {expandIconPlacement === 'right' && renderExpandIcon('right')}
) : ( diff --git a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap index 618894c8f8..ea569a40fa 100644 --- a/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap +++ b/packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap @@ -229,3 +229,87 @@ exports[`Accordion renders disabled 1`] = ` `; + +exports[`Accordion renders expand icon on the left if the \`expandIconPlacement\` prop is provided 1`] = ` +
+
+
+ +
+
+
+
+
+
+ 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. +
+
+
+
+
+
+
+
+
+`; diff --git a/packages/base/Accordion/src/Accordion/story/ExpandIconPlacement.example.tsx b/packages/base/Accordion/src/Accordion/story/ExpandIconPlacement.example.tsx new file mode 100644 index 0000000000..6e1d9ec948 --- /dev/null +++ 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 = () => ( + + + } + > + What is a dog? + + + +) + +const DetailsDogDefinitionPanel = () => ( + + 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. + +) + +export default Example diff --git a/packages/base/Accordion/src/Accordion/story/index.jsx b/packages/base/Accordion/src/Accordion/story/index.jsx index afe10f39bc..f3323e0c6b 100644 --- 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 index 7c600e1000..1c43b8ef4a 100644 --- 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, }, @@ -101,5 +104,8 @@ export default ({ palette, typography }: Theme) => { justifyContent: 'space-between', lineHeight: '1.5em', }, + contentRight: { + justifyContent: 'normal', + }, }) } diff --git a/packages/base/Accordion/src/Accordion/test.tsx b/packages/base/Accordion/src/Accordion/test.tsx index 2f3058df0d..f491bf8b13 100644 --- a/packages/base/Accordion/src/Accordion/test.tsx +++ b/packages/base/Accordion/src/Accordion/test.tsx @@ -77,6 +77,12 @@ describe('Accordion', () => { expect(handleChange).toHaveBeenCalledTimes(3) }) + it('renders expand icon on the left if the `expandIconPlacement` prop is provided', () => { + const { container } = renderAccordion({ expandIconPlacement: 'left' }) + + expect(container).toMatchSnapshot() + }) + it('renders disabled', async () => { const { container } = renderAccordion({ disabled: true })