@toptal/picasso-accordion 2.1.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,6 @@ import type { ReactNode, ChangeEvent, HTMLAttributes, ReactElement } from 'react
2
2
  import React from 'react';
3
3
  import type { StandardProps, TransitionProps } from '@toptal/picasso-shared';
4
4
  export declare type Borders = 'all' | 'middle' | 'none';
5
- export declare type ExpandIconPlacement = 'left' | 'right';
6
5
  export interface Props extends StandardProps, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
7
6
  /** Always visible part of accordion */
8
7
  children?: ReactNode;
@@ -16,8 +15,6 @@ export interface Props extends StandardProps, Omit<HTMLAttributes<HTMLDivElement
16
15
  disabled?: boolean;
17
16
  /** Customize icon indicating expanded status */
18
17
  expandIcon?: ReactElement;
19
- /** Customize icon placement */
20
- expandIconPlacement?: ExpandIconPlacement;
21
18
  /** Defines where the horizontal borders show */
22
19
  borders?: Borders;
23
20
  /** Callback invoked when `Accordion` item is toggled */
@@ -1 +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;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"}
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"}
@@ -27,7 +27,7 @@ const decorateWithExpandIconClasses = (expandIcon, classes) => React.cloneElemen
27
27
  });
28
28
  /* eslint-disable complexity */
29
29
  export const Accordion = forwardRef(function Accordion(props, ref) {
30
- 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"]);
30
+ 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"]);
31
31
  const classes = useStyles(props);
32
32
  const borderClasses = {
33
33
  all: classes.bordersAll,
@@ -48,26 +48,16 @@ export const Accordion = forwardRef(function Accordion(props, ref) {
48
48
  [classes.expandIconExpanded]: summaryExpanded,
49
49
  });
50
50
  const appliedBorders = children || expanded ? borders : 'none';
51
- const renderExpandIcon = (expandIconPosition) => {
52
- if (expandIcon) {
53
- return decorateWithExpandIconClasses(expandIcon, expandIconClass);
54
- }
55
- return (React.createElement("div", { className: cx({
56
- [classes.expandIconAlignTop]: true,
57
- [classes.expandIconLeft]: expandIconPosition === 'left',
58
- }) },
59
- React.createElement(ButtonAction, { icon: React.createElement(ArrowDownMinor16, { className: expandIconClass }) })));
60
- };
61
51
  return (React.createElement(MUIAccordion, Object.assign({}, rest, { ref: ref, classes: {
62
52
  root: cx(classes.root, borderClasses[appliedBorders]),
63
53
  }, className: className, style: style, elevation: 0, expanded: summaryExpanded, disabled: disabled, onChange: onChange, TransitionProps: transitionProps }),
64
54
  children ? (React.createElement(AccordionSummary, { classes: {
65
55
  root: classes.summary,
66
- content: `${classes.content} ${expandIconPlacement === 'left' ? classes.contentRight : ''}`,
56
+ content: classes.content,
67
57
  }, expandIcon: null, onClick: handleSummaryClick, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.accordionSummary },
68
- expandIconPlacement === 'left' && renderExpandIcon('left'),
69
58
  children,
70
- expandIconPlacement === 'right' && renderExpandIcon('right'))) : (React.createElement(EmptyAccordionSummary, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.emptyAccordionSummary })),
59
+ expandIcon ? (decorateWithExpandIconClasses(expandIcon, expandIconClass)) : (React.createElement("div", { className: classes.expandIconAlignTop },
60
+ React.createElement(ButtonAction, { icon: React.createElement(ArrowDownMinor16, { className: expandIconClass }) }))))) : (React.createElement(EmptyAccordionSummary, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.emptyAccordionSummary })),
71
61
  React.createElement(AccordionDetails, { classes: {
72
62
  root: classes.details,
73
63
  } }, content)));
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
@@ -1,4 +1,4 @@
1
1
  import type { Theme } from '@material-ui/core/styles';
2
- 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">;
2
+ declare const _default: ({ palette, typography }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "expandIcon" | "details" | "summary" | "bordersAll" | "bordersMiddle" | "bordersNone" | "summaryFontWeightInherit" | "expandIconExpanded" | "expandIconAlignTop" | "summaryWrapper" | "detailsWrapper">;
3
3
  export default _default;
4
4
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +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,wBA0FC"}
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"}
@@ -68,9 +68,6 @@ export default ({ palette, typography }) => {
68
68
  height: '1.5em',
69
69
  alignSelf: 'flex-start',
70
70
  },
71
- expandIconLeft: {
72
- marginRight: '0.5em',
73
- },
74
71
  summary: {
75
72
  color: palette.common.black,
76
73
  },
@@ -94,9 +91,6 @@ export default ({ palette, typography }) => {
94
91
  justifyContent: 'space-between',
95
92
  lineHeight: '1.5em',
96
93
  },
97
- contentRight: {
98
- justifyContent: 'normal',
99
- },
100
94
  });
101
95
  };
102
96
  //# sourceMappingURL=styles.js.map
@@ -1 +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,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"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-accordion",
3
- "version": "2.1.0",
3
+ "version": "3.0.0",
4
4
  "description": "Toptal UI components library - Accordion",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -18,7 +18,6 @@ import { AccordionDetails } from '../AccordionDetails'
18
18
  import styles from './styles'
19
19
 
20
20
  export type Borders = 'all' | 'middle' | 'none'
21
- export type ExpandIconPlacement = 'left' | 'right'
22
21
 
23
22
  const useStyles = makeStyles<Theme>(styles, {
24
23
  name: 'PicassoAccordion',
@@ -45,8 +44,6 @@ export interface Props
45
44
  disabled?: boolean
46
45
  /** Customize icon indicating expanded status */
47
46
  expandIcon?: ReactElement
48
- /** Customize icon placement */
49
- expandIconPlacement?: ExpandIconPlacement
50
47
  /** Defines where the horizontal borders show */
51
48
  borders?: Borders
52
49
  /** Callback invoked when `Accordion` item is toggled */
@@ -78,7 +75,6 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
78
75
  expanded,
79
76
  defaultExpanded,
80
77
  expandIcon,
81
- expandIconPlacement = 'right',
82
78
  borders,
83
79
  disabled,
84
80
  className,
@@ -114,23 +110,6 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
114
110
 
115
111
  const appliedBorders = children || expanded ? (borders as Borders) : 'none'
116
112
 
117
- const renderExpandIcon = (expandIconPosition: 'left' | 'right') => {
118
- if (expandIcon) {
119
- return decorateWithExpandIconClasses(expandIcon, expandIconClass)
120
- }
121
-
122
- return (
123
- <div
124
- className={cx({
125
- [classes.expandIconAlignTop]: true,
126
- [classes.expandIconLeft]: expandIconPosition === 'left',
127
- })}
128
- >
129
- <ButtonAction icon={<ArrowDownMinor16 className={expandIconClass} />} />
130
- </div>
131
- )
132
- }
133
-
134
113
  return (
135
114
  <MUIAccordion
136
115
  {...rest}
@@ -150,17 +129,22 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
150
129
  <AccordionSummary
151
130
  classes={{
152
131
  root: classes.summary,
153
- content: `${classes.content} ${
154
- expandIconPlacement === 'left' ? classes.contentRight : ''
155
- }`,
132
+ content: classes.content,
156
133
  }}
157
134
  expandIcon={null}
158
135
  onClick={handleSummaryClick}
159
136
  data-testid={testIds?.accordionSummary}
160
137
  >
161
- {expandIconPlacement === 'left' && renderExpandIcon('left')}
162
138
  {children}
163
- {expandIconPlacement === 'right' && renderExpandIcon('right')}
139
+ {expandIcon ? (
140
+ decorateWithExpandIconClasses(expandIcon, expandIconClass)
141
+ ) : (
142
+ <div className={classes.expandIconAlignTop}>
143
+ <ButtonAction
144
+ icon={<ArrowDownMinor16 className={expandIconClass} />}
145
+ />
146
+ </div>
147
+ )}
164
148
  </AccordionSummary>
165
149
  ) : (
166
150
  <EmptyAccordionSummary data-testid={testIds?.emptyAccordionSummary} />
@@ -229,87 +229,3 @@ exports[`Accordion renders disabled 1`] = `
229
229
  </div>
230
230
  </div>
231
231
  `;
232
-
233
- exports[`Accordion renders expand icon on the left if the \`expandIconPlacement\` prop is provided 1`] = `
234
- <div>
235
- <div
236
- class="Picasso-root"
237
- >
238
- <div
239
- class="MuiPaper-root MuiAccordion-root PicassoAccordion-root PicassoAccordion-bordersAll MuiAccordion-rounded MuiPaper-elevation0 MuiPaper-rounded"
240
- >
241
- <div
242
- aria-disabled="false"
243
- aria-expanded="false"
244
- class="MuiButtonBase-root MuiAccordionSummary-root WithStyles(ForwardRef(AccordionSummary))-root PicassoAccordion-summary"
245
- role="button"
246
- tabindex="0"
247
- >
248
- <div
249
- class="MuiAccordionSummary-content WithStyles(ForwardRef(AccordionSummary))-content PicassoAccordion-content PicassoAccordion-contentRight"
250
- >
251
- <div
252
- class="PicassoAccordion-expandIconAlignTop PicassoAccordion-expandIconLeft"
253
- >
254
- <button
255
- aria-disabled="false"
256
- 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"
257
- data-component-type="button"
258
- role="button"
259
- tabindex="0"
260
- type="button"
261
- >
262
- <span
263
- class="items-center inline-flex font-semibold text-blue text-md"
264
- >
265
- <svg
266
- class="PicassoSvgArrowDownMinor16-root text-[1.2em] flex-1 w-4 h-4 text-graphite PicassoAccordion-expandIcon"
267
- style="min-width: 16px; min-height: 16px;"
268
- viewBox="0 0 16 16"
269
- >
270
- <path
271
- d="m11.997 5.29.707.707-4 4-.707.707-.707-.707-4-4 .707-.707 4 4 4-4Z"
272
- />
273
- </svg>
274
- </span>
275
- </button>
276
- </div>
277
- <div
278
- class="PicassoAccordion-summaryWrapper"
279
- data-testid="accordion-summary"
280
- >
281
- What is a dog?
282
- </div>
283
- </div>
284
- </div>
285
- <div
286
- class="MuiCollapse-root MuiCollapse-hidden"
287
- style="min-height: 0px;"
288
- >
289
- <div
290
- class="MuiCollapse-wrapper"
291
- >
292
- <div
293
- class="MuiCollapse-wrapperInner"
294
- >
295
- <div
296
- role="region"
297
- >
298
- <div
299
- class="flex p-0"
300
- >
301
- <div
302
- class="PicassoAccordion-detailsWrapper"
303
- data-testid="accordion-details"
304
- >
305
- 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.
306
- </div>
307
- </div>
308
- </div>
309
- </div>
310
- </div>
311
- </div>
312
- </div>
313
- </div>
314
- </div>
315
- `;
@@ -53,15 +53,6 @@ page
53
53
  },
54
54
  'base/Accordion'
55
55
  )
56
- .addExample(
57
- 'Accordion/story/ExpandIconPlacement.example.tsx',
58
- {
59
- title: 'Expand Icon Placement',
60
- description:
61
- 'Accordion expand icon is placed to the right until the `expandIconPlacement` prop is set to `left`.',
62
- },
63
- 'base/Accordion'
64
- )
65
56
  .addExample(
66
57
  'Accordion/story/BorderedGroups.example.tsx',
67
58
  {
@@ -78,9 +78,6 @@ export default ({ palette, typography }: Theme) => {
78
78
  height: '1.5em',
79
79
  alignSelf: 'flex-start',
80
80
  },
81
- expandIconLeft: {
82
- marginRight: '0.5em',
83
- },
84
81
  summary: {
85
82
  color: palette.common.black,
86
83
  },
@@ -104,8 +101,5 @@ export default ({ palette, typography }: Theme) => {
104
101
  justifyContent: 'space-between',
105
102
  lineHeight: '1.5em',
106
103
  },
107
- contentRight: {
108
- justifyContent: 'normal',
109
- },
110
104
  })
111
105
  }
@@ -77,12 +77,6 @@ describe('Accordion', () => {
77
77
  expect(handleChange).toHaveBeenCalledTimes(3)
78
78
  })
79
79
 
80
- it('renders expand icon on the left if the `expandIconPlacement` prop is provided', () => {
81
- const { container } = renderAccordion({ expandIconPlacement: 'left' })
82
-
83
- expect(container).toMatchSnapshot()
84
- })
85
-
86
80
  it('renders disabled', async () => {
87
81
  const { container } = renderAccordion({ disabled: true })
88
82
 
@@ -1,26 +0,0 @@
1
- import React from 'react'
2
- import { Accordion, Grid } from '@toptal/picasso'
3
-
4
- const Example = () => (
5
- <Grid>
6
- <Grid.Item sm={6}>
7
- <Accordion
8
- expandIconPlacement='left'
9
- defaultExpanded
10
- content={<DetailsDogDefinitionPanel />}
11
- >
12
- <Accordion.Summary>What is a dog?</Accordion.Summary>
13
- </Accordion>
14
- </Grid.Item>
15
- </Grid>
16
- )
17
-
18
- const DetailsDogDefinitionPanel = () => (
19
- <Accordion.Details>
20
- A dog is a type of domesticated animal. Known for its loyalty and
21
- faithfulness, it can be found as a welcome guest in many households across
22
- the world.
23
- </Accordion.Details>
24
- )
25
-
26
- export default Example