@toptal/picasso-show-more 1.0.36 → 2.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.
- package/dist-package/src/ShowMore/ShowMore.d.ts.map +1 -1
- package/dist-package/src/ShowMore/ShowMore.js +3 -9
- package/dist-package/src/ShowMore/ShowMore.js.map +1 -1
- package/package.json +6 -5
- package/src/ShowMore/ShowMore.tsx +7 -12
- package/src/ShowMore/__snapshots__/test.tsx.snap +18 -18
- package/dist-package/src/ShowMore/styles.d.ts +0 -4
- package/dist-package/src/ShowMore/styles.d.ts.map +0 -1
- package/dist-package/src/ShowMore/styles.js +0 -22
- package/dist-package/src/ShowMore/styles.js.map +0 -1
- package/src/ShowMore/styles.ts +0 -24
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShowMore.d.ts","sourceRoot":"","sources":["../../../src/ShowMore/ShowMore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqD,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"ShowMore.d.ts","sourceRoot":"","sources":["../../../src/ShowMore/ShowMore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;CACF;AAED,eAAO,MAAM,QAAQ,+EAgFnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
|
|
@@ -10,18 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef, useMemo, useCallback, useState } from 'react';
|
|
13
|
-
import
|
|
14
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
13
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge';
|
|
15
14
|
import Truncate from 'react-truncate';
|
|
16
15
|
import { ChevronRight16 } from '@toptal/picasso-icons';
|
|
17
16
|
import { Typography } from '@toptal/picasso-typography';
|
|
18
17
|
import { ButtonAction } from '@toptal/picasso-button';
|
|
19
|
-
import styles from './styles';
|
|
20
18
|
import { replaceLineBreaksWithTags } from './utils';
|
|
21
|
-
const useStyles = makeStyles(styles, { name: 'PicassoShowMore' });
|
|
22
19
|
export const ShowMore = forwardRef(function ShowMore(props, ref) {
|
|
23
20
|
const { children, rows = 4, initialExpanded = false, disableToggle = false, moreText = 'Show more', lessText = 'Show less', onToggle = () => { }, className, style, testIds } = props, rest = __rest(props, ["children", "rows", "initialExpanded", "disableToggle", "moreText", "lessText", "onToggle", "className", "style", "testIds"]);
|
|
24
|
-
const classes = useStyles();
|
|
25
21
|
const [shownMore, setShownMore] = useState(initialExpanded);
|
|
26
22
|
const [needsTruncation, setNeedsTruncation] = useState(true);
|
|
27
23
|
const content = useMemo(() => typeof children === 'string'
|
|
@@ -36,10 +32,8 @@ export const ShowMore = forwardRef(function ShowMore(props, ref) {
|
|
|
36
32
|
const nextState = !shownMore;
|
|
37
33
|
setShownMore(nextState);
|
|
38
34
|
onToggle(nextState);
|
|
39
|
-
}, className:
|
|
40
|
-
React.createElement(ChevronRight16, { className:
|
|
41
|
-
[classes.expandedIcon]: shownMore,
|
|
42
|
-
}) })), iconPosition: 'right', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.toggleButton }, shownMore ? lessText : moreText))));
|
|
35
|
+
}, className: 'inline-flex items-center transition-none', icon: React.createElement("div", { className: 'rotate-90 text-lg/none' },
|
|
36
|
+
React.createElement(ChevronRight16, { className: twJoin('text-graphite-700', shownMore && 'rotate-180') })), iconPosition: 'right', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.toggleButton }, shownMore ? lessText : moreText))));
|
|
43
37
|
});
|
|
44
38
|
ShowMore.displayName = 'ShowMore';
|
|
45
39
|
export default ShowMore;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShowMore.js","sourceRoot":"","sources":["../../../src/ShowMore/ShowMore.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ShowMore.js","sourceRoot":"","sources":["../../../src/ShowMore/ShowMore.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-show-more",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Toptal UI components library - ShowMore",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -22,10 +22,9 @@
|
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@toptal/picasso-button": "4.0.
|
|
25
|
+
"@toptal/picasso-button": "4.0.1",
|
|
26
26
|
"@toptal/picasso-icons": "1.6.0",
|
|
27
27
|
"@toptal/picasso-typography": "4.0.0",
|
|
28
|
-
"classnames": "^2.5.1",
|
|
29
28
|
"react-truncate": "^2.4.0"
|
|
30
29
|
},
|
|
31
30
|
"sideEffects": [
|
|
@@ -33,14 +32,16 @@
|
|
|
33
32
|
"**/styles.js"
|
|
34
33
|
],
|
|
35
34
|
"peerDependencies": {
|
|
36
|
-
"@
|
|
35
|
+
"@toptal/picasso-tailwind": ">=2.7",
|
|
36
|
+
"@toptal/picasso-tailwind-merge": "^2.0.0",
|
|
37
37
|
"react": ">=16.12.0 < 19.0.0"
|
|
38
38
|
},
|
|
39
39
|
"exports": {
|
|
40
40
|
".": "./dist-package/src/index.js"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@toptal/picasso-test-utils": "1.1.1"
|
|
43
|
+
"@toptal/picasso-test-utils": "1.1.1",
|
|
44
|
+
"@toptal/picasso-tailwind-merge": "2.0.0"
|
|
44
45
|
},
|
|
45
46
|
"files": [
|
|
46
47
|
"dist-package/**",
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
import type { ReactNode } from 'react'
|
|
2
2
|
import React, { forwardRef, useMemo, useCallback, useState } from 'react'
|
|
3
|
-
import
|
|
4
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
5
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
3
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge'
|
|
6
4
|
import Truncate from 'react-truncate'
|
|
7
5
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
8
6
|
import { ChevronRight16 } from '@toptal/picasso-icons'
|
|
9
7
|
import { Typography } from '@toptal/picasso-typography'
|
|
10
8
|
import { ButtonAction } from '@toptal/picasso-button'
|
|
11
9
|
|
|
12
|
-
import styles from './styles'
|
|
13
10
|
import { replaceLineBreaksWithTags } from './utils'
|
|
14
11
|
|
|
15
12
|
export interface Props extends BaseProps {
|
|
@@ -33,8 +30,6 @@ export interface Props extends BaseProps {
|
|
|
33
30
|
}
|
|
34
31
|
}
|
|
35
32
|
|
|
36
|
-
const useStyles = makeStyles<Theme>(styles, { name: 'PicassoShowMore' })
|
|
37
|
-
|
|
38
33
|
export const ShowMore = forwardRef<HTMLSpanElement, Props>(function ShowMore(
|
|
39
34
|
props,
|
|
40
35
|
ref
|
|
@@ -52,7 +47,6 @@ export const ShowMore = forwardRef<HTMLSpanElement, Props>(function ShowMore(
|
|
|
52
47
|
testIds,
|
|
53
48
|
...rest
|
|
54
49
|
} = props
|
|
55
|
-
const classes = useStyles()
|
|
56
50
|
const [shownMore, setShownMore] = useState(initialExpanded)
|
|
57
51
|
const [needsTruncation, setNeedsTruncation] = useState(true)
|
|
58
52
|
const content = useMemo(
|
|
@@ -97,13 +91,14 @@ export const ShowMore = forwardRef<HTMLSpanElement, Props>(function ShowMore(
|
|
|
97
91
|
setShownMore(nextState)
|
|
98
92
|
onToggle(nextState)
|
|
99
93
|
}}
|
|
100
|
-
className=
|
|
94
|
+
className='inline-flex items-center transition-none'
|
|
101
95
|
icon={
|
|
102
|
-
<div className=
|
|
96
|
+
<div className='rotate-90 text-lg/none'>
|
|
103
97
|
<ChevronRight16
|
|
104
|
-
className={
|
|
105
|
-
|
|
106
|
-
|
|
98
|
+
className={twJoin(
|
|
99
|
+
'text-graphite-700',
|
|
100
|
+
shownMore && 'rotate-180'
|
|
101
|
+
)}
|
|
107
102
|
/>
|
|
108
103
|
</div>
|
|
109
104
|
}
|
|
@@ -24,7 +24,7 @@ exports[`ShowMore renders 1`] = `
|
|
|
24
24
|
</p>
|
|
25
25
|
<button
|
|
26
26
|
aria-disabled="false"
|
|
27
|
-
class="base-Button text-lg
|
|
27
|
+
class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle 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 inline-flex items-center transition-none"
|
|
28
28
|
data-component-type="button"
|
|
29
29
|
role="button"
|
|
30
30
|
tabindex="0"
|
|
@@ -35,10 +35,10 @@ exports[`ShowMore renders 1`] = `
|
|
|
35
35
|
>
|
|
36
36
|
Show more
|
|
37
37
|
<div
|
|
38
|
-
class="
|
|
38
|
+
class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
|
|
39
39
|
>
|
|
40
40
|
<svg
|
|
41
|
-
class="PicassoSvgChevronRight16-root
|
|
41
|
+
class="PicassoSvgChevronRight16-root text-graphite"
|
|
42
42
|
style="min-width: 16px; min-height: 16px;"
|
|
43
43
|
viewBox="0 0 16 16"
|
|
44
44
|
>
|
|
@@ -77,7 +77,7 @@ exports[`ShowMore when custom lessText text is specified should render with cust
|
|
|
77
77
|
</p>
|
|
78
78
|
<button
|
|
79
79
|
aria-disabled="false"
|
|
80
|
-
class="base-Button text-lg
|
|
80
|
+
class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle 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 inline-flex items-center transition-none"
|
|
81
81
|
data-component-type="button"
|
|
82
82
|
role="button"
|
|
83
83
|
tabindex="0"
|
|
@@ -88,10 +88,10 @@ exports[`ShowMore when custom lessText text is specified should render with cust
|
|
|
88
88
|
>
|
|
89
89
|
Show more
|
|
90
90
|
<div
|
|
91
|
-
class="
|
|
91
|
+
class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
|
|
92
92
|
>
|
|
93
93
|
<svg
|
|
94
|
-
class="PicassoSvgChevronRight16-root
|
|
94
|
+
class="PicassoSvgChevronRight16-root text-graphite"
|
|
95
95
|
style="min-width: 16px; min-height: 16px;"
|
|
96
96
|
viewBox="0 0 16 16"
|
|
97
97
|
>
|
|
@@ -130,7 +130,7 @@ exports[`ShowMore when custom showMore text is specified should render with cust
|
|
|
130
130
|
</p>
|
|
131
131
|
<button
|
|
132
132
|
aria-disabled="false"
|
|
133
|
-
class="base-Button text-lg
|
|
133
|
+
class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle 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 inline-flex items-center transition-none"
|
|
134
134
|
data-component-type="button"
|
|
135
135
|
role="button"
|
|
136
136
|
tabindex="0"
|
|
@@ -141,10 +141,10 @@ exports[`ShowMore when custom showMore text is specified should render with cust
|
|
|
141
141
|
>
|
|
142
142
|
Display everything
|
|
143
143
|
<div
|
|
144
|
-
class="
|
|
144
|
+
class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
|
|
145
145
|
>
|
|
146
146
|
<svg
|
|
147
|
-
class="PicassoSvgChevronRight16-root
|
|
147
|
+
class="PicassoSvgChevronRight16-root text-graphite"
|
|
148
148
|
style="min-width: 16px; min-height: 16px;"
|
|
149
149
|
viewBox="0 0 16 16"
|
|
150
150
|
>
|
|
@@ -197,7 +197,7 @@ exports[`ShowMore when initialExpanded prop is true should render expanded versi
|
|
|
197
197
|
</p>
|
|
198
198
|
<button
|
|
199
199
|
aria-disabled="false"
|
|
200
|
-
class="base-Button text-lg
|
|
200
|
+
class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle 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 inline-flex items-center transition-none"
|
|
201
201
|
data-component-type="button"
|
|
202
202
|
role="button"
|
|
203
203
|
tabindex="0"
|
|
@@ -208,10 +208,10 @@ exports[`ShowMore when initialExpanded prop is true should render expanded versi
|
|
|
208
208
|
>
|
|
209
209
|
Show less
|
|
210
210
|
<div
|
|
211
|
-
class="
|
|
211
|
+
class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
|
|
212
212
|
>
|
|
213
213
|
<svg
|
|
214
|
-
class="PicassoSvgChevronRight16-root
|
|
214
|
+
class="PicassoSvgChevronRight16-root text-graphite rotate-180"
|
|
215
215
|
style="min-width: 16px; min-height: 16px;"
|
|
216
216
|
viewBox="0 0 16 16"
|
|
217
217
|
>
|
|
@@ -250,7 +250,7 @@ exports[`ShowMore when initialExpanded prop is true when show less link is click
|
|
|
250
250
|
</p>
|
|
251
251
|
<button
|
|
252
252
|
aria-disabled="false"
|
|
253
|
-
class="base-Button text-lg
|
|
253
|
+
class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle 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 inline-flex items-center transition-none"
|
|
254
254
|
data-component-type="button"
|
|
255
255
|
role="button"
|
|
256
256
|
tabindex="0"
|
|
@@ -261,10 +261,10 @@ exports[`ShowMore when initialExpanded prop is true when show less link is click
|
|
|
261
261
|
>
|
|
262
262
|
Show more
|
|
263
263
|
<div
|
|
264
|
-
class="
|
|
264
|
+
class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
|
|
265
265
|
>
|
|
266
266
|
<svg
|
|
267
|
-
class="PicassoSvgChevronRight16-root
|
|
267
|
+
class="PicassoSvgChevronRight16-root text-graphite"
|
|
268
268
|
style="min-width: 16px; min-height: 16px;"
|
|
269
269
|
viewBox="0 0 16 16"
|
|
270
270
|
>
|
|
@@ -291,7 +291,7 @@ exports[`ShowMore when show more link is clicked should render expanded version
|
|
|
291
291
|
</p>
|
|
292
292
|
<button
|
|
293
293
|
aria-disabled="false"
|
|
294
|
-
class="base-Button text-lg
|
|
294
|
+
class="base-Button text-lg justify-center select-none appearance-none m-0 relative normal-case align-middle 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 inline-flex items-center transition-none"
|
|
295
295
|
data-component-type="button"
|
|
296
296
|
role="button"
|
|
297
297
|
tabindex="0"
|
|
@@ -302,10 +302,10 @@ exports[`ShowMore when show more link is clicked should render expanded version
|
|
|
302
302
|
>
|
|
303
303
|
Show less
|
|
304
304
|
<div
|
|
305
|
-
class="
|
|
305
|
+
class="flex-1 w-4 h-4 text-graphite ml-[0.5rem] rotate-90 text-lg/none"
|
|
306
306
|
>
|
|
307
307
|
<svg
|
|
308
|
-
class="PicassoSvgChevronRight16-root
|
|
308
|
+
class="PicassoSvgChevronRight16-root text-graphite rotate-180"
|
|
309
309
|
style="min-width: 16px; min-height: 16px;"
|
|
310
310
|
viewBox="0 0 16 16"
|
|
311
311
|
>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ShowMore/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAoBI"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
-
export default ({ palette }) => createStyles({
|
|
3
|
-
toggleText: {
|
|
4
|
-
display: 'flex',
|
|
5
|
-
alignItems: 'center',
|
|
6
|
-
marginTop: '0.5rem',
|
|
7
|
-
transition: 'none',
|
|
8
|
-
fontWeight: 'normal',
|
|
9
|
-
},
|
|
10
|
-
iconWrapper: {
|
|
11
|
-
fontSize: '1rem !important',
|
|
12
|
-
lineHeight: 0,
|
|
13
|
-
transform: 'rotate(90deg)',
|
|
14
|
-
},
|
|
15
|
-
icon: {
|
|
16
|
-
color: palette.grey.dark,
|
|
17
|
-
},
|
|
18
|
-
expandedIcon: {
|
|
19
|
-
transform: 'rotate(180deg)',
|
|
20
|
-
},
|
|
21
|
-
});
|
|
22
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ShowMore/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,UAAU,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,iBAAiB;QAC3B,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,eAAe;KAC3B;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,YAAY,EAAE;QACZ,SAAS,EAAE,gBAAgB;KAC5B;CACF,CAAC,CAAA"}
|
package/src/ShowMore/styles.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
2
|
-
import { createStyles } from '@material-ui/core/styles'
|
|
3
|
-
|
|
4
|
-
export default ({ palette }: Theme) =>
|
|
5
|
-
createStyles({
|
|
6
|
-
toggleText: {
|
|
7
|
-
display: 'flex',
|
|
8
|
-
alignItems: 'center',
|
|
9
|
-
marginTop: '0.5rem',
|
|
10
|
-
transition: 'none',
|
|
11
|
-
fontWeight: 'normal',
|
|
12
|
-
},
|
|
13
|
-
iconWrapper: {
|
|
14
|
-
fontSize: '1rem !important',
|
|
15
|
-
lineHeight: 0,
|
|
16
|
-
transform: 'rotate(90deg)',
|
|
17
|
-
},
|
|
18
|
-
icon: {
|
|
19
|
-
color: palette.grey.dark,
|
|
20
|
-
},
|
|
21
|
-
expandedIcon: {
|
|
22
|
-
transform: 'rotate(180deg)',
|
|
23
|
-
},
|
|
24
|
-
})
|