@toptal/picasso-accordion 2.0.11 → 2.1.0

package/dist-package/src/Accordion/Accordion.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode, ChangeEvent, HTMLAttributes, ReactElement } from 'react
 import React from 'react';
 import type { StandardProps, TransitionProps } from '@toptal/picasso-shared';
 export declare type Borders = 'all' | 'middle' | 'none';
+export declare type ExpandIconPlacement = 'left' | 'right';
 export interface Props extends StandardProps, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Always visible part of accordion */
     children?: ReactNode;
@@ -15,6 +16,8 @@ export interface Props extends StandardProps, Omit<HTMLAttributes<HTMLDivElement
     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 */

package/dist-package/src/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,cAAc,EACd,YAAY,EACb,MAAM,OAAO,CAAA;AACd,OAAO,KAA+B,MAAM,OAAO,CAAA;AAKnD,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAQ5E,oBAAY,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;AAY/C,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAClD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAA;IAClB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gDAAgD;IAChD,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9D,kKAAkK;IAClK,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,OAAO,CAAC,EAAE;QACR,qBAAqB,CAAC,EAAE,MAAM,CAAA;QAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF;AAWD,eAAO,MAAM,SAAS,2EA6FpB,CAAA;AAYF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,cAAc,EACd,YAAY,EACb,MAAM,OAAO,CAAA;AACd,OAAO,KAA+B,MAAM,OAAO,CAAA;AAKnD,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAQ5E,oBAAY,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;AAC/C,oBAAY,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAA;AAYlD,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAClD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAA;IAClB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gDAAgD;IAChD,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,+BAA+B;IAC/B,mBAAmB,CAAC,EAAE,mBAAmB,CAAA;IACzC,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9D,kKAAkK;IAClK,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,OAAO,CAAC,EAAE;QACR,qBAAqB,CAAC,EAAE,MAAM,CAAA;QAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF;AAWD,eAAO,MAAM,SAAS,2EA0GpB,CAAA;AAYF,eAAe,SAAS,CAAA"}

package/dist-package/src/Accordion/Accordion.js

@@ -27,7 +27,7 @@ const decorateWithExpandIconClasses = (expandIcon, classes) => React.cloneElemen
 });
 /* eslint-disable complexity */
 export const Accordion = forwardRef(function Accordion(props, ref) {
-    const { children, content, expanded, defaultExpanded, expandIcon, borders, disabled, className, style, onChange, testIds, transitionProps } = props, rest = __rest(props, ["children", "content", "expanded", "defaultExpanded", "expandIcon", "borders", "disabled", "className", "style", "onChange", "testIds", "transitionProps"]);
+    const { children, content, expanded, defaultExpanded, expandIcon, expandIconPlacement = 'right', borders, disabled, className, style, onChange, testIds, transitionProps } = props, rest = __rest(props, ["children", "content", "expanded", "defaultExpanded", "expandIcon", "expandIconPlacement", "borders", "disabled", "className", "style", "onChange", "testIds", "transitionProps"]);
     const classes = useStyles(props);
     const borderClasses = {
         all: classes.bordersAll,
@@ -48,16 +48,26 @@ export const Accordion = forwardRef(function Accordion(props, ref) {
         [classes.expandIconExpanded]: summaryExpanded,
     });
     const appliedBorders = children || expanded ? borders : 'none';
+    const renderExpandIcon = (expandIconPosition) => {
+        if (expandIcon) {
+            return decorateWithExpandIconClasses(expandIcon, expandIconClass);
+        }
+        return (React.createElement("div", { className: cx({
+                [classes.expandIconAlignTop]: true,
+                [classes.expandIconLeft]: expandIconPosition === 'left',
+            }) },
+            React.createElement(ButtonAction, { icon: React.createElement(ArrowDownMinor16, { className: expandIconClass }) })));
+    };
     return (React.createElement(MUIAccordion, Object.assign({}, rest, { ref: ref, classes: {
             root: cx(classes.root, borderClasses[appliedBorders]),
         }, className: className, style: style, elevation: 0, expanded: summaryExpanded, disabled: disabled, onChange: onChange, TransitionProps: transitionProps }),
         children ? (React.createElement(AccordionSummary, { classes: {
                 root: classes.summary,
-                content: classes.content,
+                content: `${classes.content} ${expandIconPlacement === 'left' ? classes.contentRight : ''}`,
             }, expandIcon: null, onClick: handleSummaryClick, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.accordionSummary },
+            expandIconPlacement === 'left' && renderExpandIcon('left'),
             children,
-            expandIcon ? (decorateWithExpandIconClasses(expandIcon, expandIconClass)) : (React.createElement("div", { className: classes.expandIconAlignTop },
-                React.createElement(ButtonAction, { icon: React.createElement(ArrowDownMinor16, { className: expandIconClass }) }))))) : (React.createElement(EmptyAccordionSummary, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.emptyAccordionSummary })),
+            expandIconPlacement === 'right' && renderExpandIcon('right'))) : (React.createElement(EmptyAccordionSummary, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.emptyAccordionSummary })),
         React.createElement(AccordionDetails, { classes: {
                 root: classes.details,
             } }, content)));

package/dist-package/src/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/Accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,MAAM,MAAM,UAAU,CAAA;AAK7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,kBAAkB;CACzB,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,CAAC,EAC7B,aAAa,EAAE,UAAU,GAG1B,EAAE,EAAE,CAAC,4CAAkB,UAAU,GAAI,CAAA;AA+BtC,MAAM,6BAA6B,GAAG,CACpC,UAAwB,EACxB,OAAe,EACf,EAAE,CACF,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE;IAC7B,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;CACnD,CAAC,CAAA;AAEJ,+BAA+B;AAC/B,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAqB,SAAS,SAAS,CACxE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,eAAe,EACf,UAAU,EACV,mBAAmB,GAAG,OAAO,EAC7B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,eAAe,KAEb,KAAK,EADJ,IAAI,UACL,KAAK,EAfH,kLAeL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAChC,MAAM,aAAa,GAAiC;QAClD,GAAG,EAAE,OAAO,CAAC,UAAU;QACvB,MAAM,EAAE,OAAO,CAAC,aAAa;QAC7B,IAAI,EAAE,OAAO,CAAC,WAAW;KAC1B,CAAA;IACD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IACvE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAEjE,6EAA6E;IAC7E,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,YAAY,EAAE;QACvD,kBAAkB,CAAC,QAAQ,CAAC,CAAA;QAC5B,eAAe,CAAC,QAAQ,CAAC,CAAA;KAC1B;IAED,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAA;IACtC,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE;QAC7C,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,eAAe;KAC9C,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAE,OAAmB,CAAC,CAAC,CAAC,MAAM,CAAA;IAE3E,MAAM,gBAAgB,GAAG,CAAC,kBAAoC,EAAE,EAAE;QAChE,IAAI,UAAU,EAAE;YACd,OAAO,6BAA6B,CAAC,UAAU,EAAE,eAAe,CAAC,CAAA;SAClE;QAED,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC;gBACZ,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,IAAI;gBAClC,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,kBAAkB,KAAK,MAAM;aACxD,CAAC;YAEF,oBAAC,YAAY,IAAC,IAAI,EAAE,oBAAC,gBAAgB,IAAC,SAAS,EAAE,eAAe,GAAI,GAAI,CACpE,CACP,CAAA;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,YAAY,oBACP,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;SACtD,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe;QAE/B,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,gBAAgB,IACf,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO,CAAC,OAAO;gBACrB,OAAO,EAAE,GAAG,OAAO,CAAC,OAAO,IACzB,mBAAmB,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,EAC1D,EAAE;aACH,EACD,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,kBAAkB,iBACd,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB;YAErC,mBAAmB,KAAK,MAAM,IAAI,gBAAgB,CAAC,MAAM,CAAC;YAC1D,QAAQ;YACR,mBAAmB,KAAK,OAAO,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAC5C,CACpB,CAAC,CAAC,CAAC,CACF,oBAAC,qBAAqB,mBAAc,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,qBAAqB,GAAI,CACvE;QACD,oBAAC,gBAAgB,IACf,OAAO,EAAE;gBACP,IAAI,EAAE,OAAO,CAAC,OAAO;aACtB,IAEA,OAAO,CACS,CACN,CAChB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,OAAO,EAAE,KAAK;IACd,eAAe,EAAE,KAAK;IACtB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}

package/dist-package/src/Accordion/styles.d.ts

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, typography }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "expandIcon" | "details" | "summary" | "bordersAll" | "bordersMiddle" | "bordersNone" | "summaryFontWeightInherit" | "expandIconExpanded" | "expandIconAlignTop" | "summaryWrapper" | "detailsWrapper">;
+declare const _default: ({ palette, typography }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "expandIcon" | "details" | "summary" | "bordersAll" | "bordersMiddle" | "bordersNone" | "summaryFontWeightInherit" | "expandIconExpanded" | "expandIconAlignTop" | "expandIconLeft" | "summaryWrapper" | "detailsWrapper" | "contentRight">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Accordion/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Accordion/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;kDAoBZ,KAAK;AAA9C,wBAoFC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Accordion/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;kDAoBZ,KAAK;AAA9C,wBA0FC"}

package/dist-package/src/Accordion/styles.js

@@ -68,6 +68,9 @@ export default ({ palette, typography }) => {
             height: '1.5em',
             alignSelf: 'flex-start',
         },
+        expandIconLeft: {
+            marginRight: '0.5em',
+        },
         summary: {
             color: palette.common.black,
         },
@@ -91,6 +94,9 @@ export default ({ palette, typography }) => {
             justifyContent: 'space-between',
             lineHeight: '1.5em',
         },
+        contentRight: {
+            justifyContent: 'normal',
+        },
     });
 };
 //# sourceMappingURL=styles.js.map

package/dist-package/src/Accordion/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Accordion/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9B,YAAY,EAAE;QACZ,IAAI,EAAE;YACJ,YAAY,EAAE;gBACZ,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE;oBACV,OAAO,EAAE,CAAC;iBACX;aACF;YACD,YAAY,EAAE;gBACZ,eAAe,EAAE,OAAO;aACzB;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAE,UAAU,EAAS,EAAE,EAAE;IAChD,MAAM,eAAe,GAAG;QACtB,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,CAAC;QACV,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;QACpC,QAAQ,EAAE,UAAU;KACrB,CAAA;IAED,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,UAAU,EAAE,aAAa;YACzB,QAAQ,EAAE,MAAM;SACjB;QACD,UAAU,EAAE;YACV,mBAAmB,oBACd,eAAe,CACnB;YACD,sBAAsB,EAAE;gBACtB,OAAO,EAAE,OAAO;aACjB;YACD,kBAAkB,EAAE;gBAClB,OAAO,EAAE,MAAM;aAChB;SACF;QACD,aAAa,EAAE;YACb,UAAU,EAAE;gBACV,OAAO,EAAE,MAAM;aAChB;YACD,uBAAuB,kCAClB,eAAe,KAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,iBAAiB,GAC7B;SACF;QACD,WAAW,EAAE;YACX,mBAAmB,EAAE;gBACnB,OAAO,EAAE,MAAM;aAChB;SACF;QACD,wBAAwB,EAAE;YACxB,UAAU,EAAE,SAAS;SACtB;QACD,UAAU,EAAE;YACV,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACxB,UAAU,EAAE,kDAAkD;SAC/D;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,gBAAgB;SAC5B;QACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,OAAO;YACf,SAAS,EAAE,YAAY;SACxB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC;SACX;QACD,cAAc,EAAE;YACd,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,cAAc,EAAE;YACd,UAAU,EAAE,OAAO;YACnB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;YAC1B,QAAQ,EAAE,SAAS;YACnB,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;YAC1C,YAAY,EAAE,QAAQ;SACvB;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,eAAe;YAC/B,UAAU,EAAE,OAAO;SACpB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Accordion/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9B,YAAY,EAAE;QACZ,IAAI,EAAE;YACJ,YAAY,EAAE;gBACZ,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE;oBACV,OAAO,EAAE,CAAC;iBACX;aACF;YACD,YAAY,EAAE;gBACZ,eAAe,EAAE,OAAO;aACzB;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAE,UAAU,EAAS,EAAE,EAAE;IAChD,MAAM,eAAe,GAAG;QACtB,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,CAAC;QACV,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;QACpC,QAAQ,EAAE,UAAU;KACrB,CAAA;IAED,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,UAAU,EAAE,aAAa;YACzB,QAAQ,EAAE,MAAM;SACjB;QACD,UAAU,EAAE;YACV,mBAAmB,oBACd,eAAe,CACnB;YACD,sBAAsB,EAAE;gBACtB,OAAO,EAAE,OAAO;aACjB;YACD,kBAAkB,EAAE;gBAClB,OAAO,EAAE,MAAM;aAChB;SACF;QACD,aAAa,EAAE;YACb,UAAU,EAAE;gBACV,OAAO,EAAE,MAAM;aAChB;YACD,uBAAuB,kCAClB,eAAe,KAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,iBAAiB,GAC7B;SACF;QACD,WAAW,EAAE;YACX,mBAAmB,EAAE;gBACnB,OAAO,EAAE,MAAM;aAChB;SACF;QACD,wBAAwB,EAAE;YACxB,UAAU,EAAE,SAAS;SACtB;QACD,UAAU,EAAE;YACV,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACxB,UAAU,EAAE,kDAAkD;SAC/D;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,gBAAgB;SAC5B;QACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,OAAO;YACf,SAAS,EAAE,YAAY;SACxB;QACD,cAAc,EAAE;YACd,WAAW,EAAE,OAAO;SACrB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC;SACX;QACD,cAAc,EAAE;YACd,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;SAC5B;QACD,cAAc,EAAE;YACd,UAAU,EAAE,OAAO;YACnB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;YAC1B,QAAQ,EAAE,SAAS;YACnB,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO;YAC1C,YAAY,EAAE,QAAQ;SACvB;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,eAAe;YAC/B,UAAU,EAAE,OAAO;SACpB;QACD,YAAY,EAAE;YACZ,cAAc,EAAE,QAAQ;SACzB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-accordion",
-  "version": "2.0.11",
+  "version": "2.1.0",
   "description": "Toptal UI components library - Accordion",
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,7 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "4.0.0",
+    "@toptal/picasso-button": "4.0.1",
     "@toptal/picasso-icons": "1.6.0",
     "@toptal/picasso-utils": "1.0.3",
     "classnames": "^2.5.1"

package/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,23 @@ 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={cx({
+          [classes.expandIconAlignTop]: true,
+          [classes.expandIconLeft]: expandIconPosition === 'left',
+        })}
+      >
+        <ButtonAction icon={<ArrowDownMinor16 className={expandIconClass} />} />
+      </div>
+    )
+  }
+
   return (
     <MUIAccordion
       {...rest}
@@ -129,22 +150,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} />

package/src/Accordion/__snapshots__/test.tsx.snap

@@ -229,3 +229,87 @@ exports[`Accordion renders disabled 1`] = `
   </div>
 </div>
 `;
+
+exports[`Accordion renders expand icon on the left if the \`expandIconPlacement\` prop is provided 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <div
+      class="MuiPaper-root MuiAccordion-root PicassoAccordion-root PicassoAccordion-bordersAll MuiAccordion-rounded MuiPaper-elevation0 MuiPaper-rounded"
+    >
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content PicassoAccordion-contentRight"
+        >
+          <div
+            class="PicassoAccordion-expandIconAlignTop PicassoAccordion-expandIconLeft"
+          >
+            <button
+              aria-disabled="false"
+              class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
+              data-component-type="button"
+              role="button"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="items-center inline-flex font-semibold text-blue text-md"
+              >
+                <svg
+                  class="PicassoSvgArrowDownMinor16-root text-[1.2em] flex-1 w-4 h-4 text-graphite PicassoAccordion-expandIcon"
+                  style="min-width: 16px; min-height: 16px;"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+          <div
+            class="PicassoAccordion-summaryWrapper"
+            data-testid="accordion-summary"
+          >
+            What is a dog?
+          </div>
+        </div>
+      </div>
+      <div
+        class="MuiCollapse-root MuiCollapse-hidden"
+        style="min-height: 0px;"
+      >
+        <div
+          class="MuiCollapse-wrapper"
+        >
+          <div
+            class="MuiCollapse-wrapperInner"
+          >
+            <div
+              role="region"
+            >
+              <div
+                class="flex p-0"
+              >
+                <div
+                  class="PicassoAccordion-detailsWrapper"
+                  data-testid="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.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/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

package/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',
     {

package/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',
+    },
   })
 }

package/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 })