@toptal/picasso-section 2.0.10 → 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.
- package/dist-package/src/Section/Section.d.ts.map +1 -1
- package/dist-package/src/Section/Section.js +33 -19
- package/dist-package/src/Section/Section.js.map +1 -1
- package/package.json +6 -6
- package/src/Section/Section.tsx +45 -25
- package/src/Section/__snapshots__/test.tsx.snap +26 -41
- package/dist-package/src/Section/styles.d.ts +0 -4
- package/dist-package/src/Section/styles.d.ts.map +0 -1
- package/dist-package/src/Section/styles.js +0 -64
- package/dist-package/src/Section/styles.js.map +0 -1
- package/src/Section/styles.ts +0 -77
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/Section/Section.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/Section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AASjE,aAAK,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAA;AAE3D,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,mCAAmC;IACnC,SAAS,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAA;CACzC;AAgCD,eAAO,MAAM,OAAO,8EA+GlB,CAAA;AASF,eAAe,OAAO,CAAA"}
|
|
@@ -9,46 +9,60 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import cx from 'classnames';
|
|
13
12
|
import React, { forwardRef, useState } from 'react';
|
|
14
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
15
|
-
import { Collapse } from '@material-ui/core';
|
|
16
13
|
import { ButtonCircular } from '@toptal/picasso-button';
|
|
17
14
|
import { Container } from '@toptal/picasso-container';
|
|
18
15
|
import { Typography } from '@toptal/picasso-typography';
|
|
19
16
|
import { isString, Rotate180 } from '@toptal/picasso-utils';
|
|
20
17
|
import { ArrowDownMinor16 } from '@toptal/picasso-icons';
|
|
21
|
-
import
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
import { twMerge, twJoin } from 'tailwind-merge';
|
|
19
|
+
import { Collapse } from '@toptal/picasso-collapse';
|
|
20
|
+
const defaultChildMargin = '[&>:last-child:not(:first-child)]:mt-6';
|
|
21
|
+
const classesByVariant = {
|
|
22
|
+
default: defaultChildMargin,
|
|
23
|
+
bordered: [
|
|
24
|
+
defaultChildMargin,
|
|
25
|
+
'border rounded-md border-solid border-gray-300',
|
|
26
|
+
'p-8 [&>:last-child]:pb-0',
|
|
27
|
+
],
|
|
28
|
+
withHeaderBar: 'p-0 rounded-md border border-solid border-gray-400',
|
|
29
|
+
};
|
|
30
|
+
const classesByHeader = {
|
|
31
|
+
default: 'flex',
|
|
32
|
+
bordered: 'flex',
|
|
33
|
+
withHeaderBar: [
|
|
34
|
+
'flex',
|
|
35
|
+
'pt-3 pb-3 pl-4 pr-4',
|
|
36
|
+
'rounded-tl-md rounded-tr-md rounded-br-0 rounded-bl-0',
|
|
37
|
+
'border-solid border-l-0 border-r-0 border-t-0 border-b border-gray-400',
|
|
38
|
+
'bg-gray-100',
|
|
39
|
+
],
|
|
40
|
+
};
|
|
41
|
+
const classesByCollapsedHeader = {
|
|
42
|
+
default: 'pb-0',
|
|
43
|
+
bordered: 'pb-0',
|
|
44
|
+
withHeaderBar: ['border-b-0 rounded-md', 'transition delay-300'],
|
|
45
|
+
};
|
|
25
46
|
export const Section = forwardRef(function Section(props, ref) {
|
|
26
47
|
const { className, style, title, subtitle, actions, children, testIds, collapsible = false, defaultCollapsed = true, variant = 'default', titleSize = 'medium' } = props, rest = __rest(props, ["className", "style", "title", "subtitle", "actions", "children", "testIds", "collapsible", "defaultCollapsed", "variant", "titleSize"]);
|
|
27
|
-
const classes = useStyles();
|
|
28
48
|
const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
|
|
29
49
|
const toggleCollapse = () => setCollapsed(!collapsed);
|
|
30
|
-
const renderTitle = () => title ? (React.createElement(Typography, { as: isString(title) ? undefined : 'div', className: '
|
|
50
|
+
const renderTitle = () => title ? (React.createElement(Typography, { as: isString(title) ? undefined : 'div', className: 'mr-4 min-w-0', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.title, variant: 'heading', size: titleSize }, title)) : null;
|
|
31
51
|
const renderSubtitle = () => subtitle ? (React.createElement(Typography, { as: isString(subtitle) ? undefined : 'div', className: 'self-center !mr-4 min-w-0', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.subtitle, size: 'medium', color: 'dark-grey' }, subtitle)) : null;
|
|
32
52
|
const renderCollapse = () => collapsible ? (React.createElement(ButtonCircular, { onClick: toggleCollapse, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.collapse, variant: 'flat', icon: React.createElement(Rotate180, { on: !collapsed },
|
|
33
53
|
React.createElement(ArrowDownMinor16, null)) })) : null;
|
|
34
54
|
const hasActions = actions || collapsible;
|
|
35
|
-
const renderActions = () => hasActions ? (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.actions, className:
|
|
55
|
+
const renderActions = () => hasActions ? (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.actions, flex: true, className: 'ml-auto' },
|
|
36
56
|
actions,
|
|
37
57
|
renderCollapse())) : null;
|
|
38
58
|
const hasHeader = title || subtitle || hasActions;
|
|
39
|
-
return (React.createElement(Container, Object.assign({ ref: ref, className:
|
|
40
|
-
|
|
41
|
-
[classes.collapsed]: variant === 'default' && collapsed,
|
|
42
|
-
}, classes.root, className), variant: ['bordered', 'withHeaderBar'].includes(variant) ? 'white' : undefined, style: style }, rest),
|
|
43
|
-
hasHeader && (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header, className: cx({
|
|
44
|
-
[classes[`${variant}Header`]]: true,
|
|
45
|
-
[classes[`${variant}CollapsedHeader`]]: collapsed,
|
|
46
|
-
}) },
|
|
59
|
+
return (React.createElement(Container, Object.assign({ ref: ref, variant: ['bordered', 'withHeaderBar'].includes(variant) ? 'white' : undefined, style: style }, rest, { className: twMerge('pt-8', classesByVariant[variant], variant === 'default' && collapsed && 'pb-8', className) }),
|
|
60
|
+
hasHeader && (React.createElement(Container, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header, className: twJoin(classesByHeader[variant], collapsed && classesByCollapsedHeader[variant]) },
|
|
47
61
|
renderTitle(),
|
|
48
62
|
renderSubtitle(),
|
|
49
63
|
renderActions())),
|
|
50
64
|
React.createElement(Collapse, { in: !collapsed, unmountOnExit: true },
|
|
51
|
-
React.createElement(Container, { className:
|
|
65
|
+
React.createElement(Container, { className: variant === 'withHeaderBar' ? 'p-6' : '' }, children))));
|
|
52
66
|
});
|
|
53
67
|
Section.displayName = 'Section';
|
|
54
68
|
Section.defaultProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../src/Section/Section.tsx"],"names":[],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../src/Section/Section.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-section",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Toptal UI components library - Section",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -22,20 +22,20 @@
|
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@toptal/picasso-button": "2.0.
|
|
25
|
+
"@toptal/picasso-button": "2.0.5",
|
|
26
26
|
"@toptal/picasso-container": "1.0.3",
|
|
27
27
|
"@toptal/picasso-icons": "1.2.0",
|
|
28
|
-
"@toptal/picasso-typography": "2.0.
|
|
28
|
+
"@toptal/picasso-typography": "2.0.2",
|
|
29
29
|
"@toptal/picasso-utils": "1.0.3",
|
|
30
|
-
"
|
|
30
|
+
"@toptal/picasso-collapse": "1.0.4",
|
|
31
|
+
"tailwind-merge": "^2.2.2"
|
|
31
32
|
},
|
|
32
33
|
"sideEffects": [
|
|
33
34
|
"**/styles.ts",
|
|
34
35
|
"**/styles.js"
|
|
35
36
|
],
|
|
36
37
|
"peerDependencies": {
|
|
37
|
-
"@
|
|
38
|
-
"tailwindcss": ">=3",
|
|
38
|
+
"@toptal/picasso-tailwind": ">=2.5.0",
|
|
39
39
|
"react": ">=16.12.0 < 19.0.0"
|
|
40
40
|
},
|
|
41
41
|
"exports": {
|
package/src/Section/Section.tsx
CHANGED
|
@@ -1,17 +1,13 @@
|
|
|
1
|
-
import cx from 'classnames'
|
|
2
1
|
import type { ReactNode } from 'react'
|
|
3
2
|
import React, { forwardRef, useState } from 'react'
|
|
4
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
5
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
6
|
-
import { Collapse } from '@material-ui/core'
|
|
7
3
|
import type { SizeType, BaseProps } from '@toptal/picasso-shared'
|
|
8
4
|
import { ButtonCircular } from '@toptal/picasso-button'
|
|
9
5
|
import { Container } from '@toptal/picasso-container'
|
|
10
6
|
import { Typography } from '@toptal/picasso-typography'
|
|
11
7
|
import { isString, Rotate180 } from '@toptal/picasso-utils'
|
|
12
8
|
import { ArrowDownMinor16 } from '@toptal/picasso-icons'
|
|
13
|
-
|
|
14
|
-
import
|
|
9
|
+
import { twMerge, twJoin } from 'tailwind-merge'
|
|
10
|
+
import { Collapse } from '@toptal/picasso-collapse'
|
|
15
11
|
|
|
16
12
|
type VariantType = 'bordered' | 'default' | 'withHeaderBar'
|
|
17
13
|
|
|
@@ -40,9 +36,35 @@ export interface Props extends BaseProps {
|
|
|
40
36
|
titleSize?: SizeType<'small' | 'medium'>
|
|
41
37
|
}
|
|
42
38
|
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
39
|
+
const defaultChildMargin = '[&>:last-child:not(:first-child)]:mt-6'
|
|
40
|
+
|
|
41
|
+
const classesByVariant: Record<VariantType, string | string[]> = {
|
|
42
|
+
default: defaultChildMargin,
|
|
43
|
+
bordered: [
|
|
44
|
+
defaultChildMargin,
|
|
45
|
+
'border rounded-md border-solid border-gray-300',
|
|
46
|
+
'p-8 [&>:last-child]:pb-0',
|
|
47
|
+
],
|
|
48
|
+
withHeaderBar: 'p-0 rounded-md border border-solid border-gray-400',
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const classesByHeader: Record<VariantType, string | string[]> = {
|
|
52
|
+
default: 'flex',
|
|
53
|
+
bordered: 'flex',
|
|
54
|
+
withHeaderBar: [
|
|
55
|
+
'flex',
|
|
56
|
+
'pt-3 pb-3 pl-4 pr-4',
|
|
57
|
+
'rounded-tl-md rounded-tr-md rounded-br-0 rounded-bl-0',
|
|
58
|
+
'border-solid border-l-0 border-r-0 border-t-0 border-b border-gray-400',
|
|
59
|
+
'bg-gray-100',
|
|
60
|
+
],
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
const classesByCollapsedHeader: Record<VariantType, string | string[]> = {
|
|
64
|
+
default: 'pb-0',
|
|
65
|
+
bordered: 'pb-0',
|
|
66
|
+
withHeaderBar: ['border-b-0 rounded-md', 'transition delay-300'],
|
|
67
|
+
}
|
|
46
68
|
|
|
47
69
|
export const Section = forwardRef<HTMLDivElement, Props>(function Section(
|
|
48
70
|
props,
|
|
@@ -62,7 +84,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
|
|
|
62
84
|
titleSize = 'medium',
|
|
63
85
|
...rest
|
|
64
86
|
} = props
|
|
65
|
-
|
|
87
|
+
|
|
66
88
|
const [collapsed, setCollapsed] = useState(
|
|
67
89
|
collapsible ? defaultCollapsed : false
|
|
68
90
|
)
|
|
@@ -73,7 +95,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
|
|
|
73
95
|
title ? (
|
|
74
96
|
<Typography
|
|
75
97
|
as={isString(title) ? undefined : 'div'}
|
|
76
|
-
className='
|
|
98
|
+
className='mr-4 min-w-0'
|
|
77
99
|
data-testid={testIds?.title}
|
|
78
100
|
variant='heading'
|
|
79
101
|
size={titleSize}
|
|
@@ -112,7 +134,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
|
|
|
112
134
|
const hasActions = actions || collapsible
|
|
113
135
|
const renderActions = () =>
|
|
114
136
|
hasActions ? (
|
|
115
|
-
<Container data-testid={testIds?.actions} className=
|
|
137
|
+
<Container data-testid={testIds?.actions} flex className='ml-auto'>
|
|
116
138
|
{actions}
|
|
117
139
|
{renderCollapse()}
|
|
118
140
|
</Container>
|
|
@@ -123,27 +145,25 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
|
|
|
123
145
|
return (
|
|
124
146
|
<Container
|
|
125
147
|
ref={ref}
|
|
126
|
-
className={cx(
|
|
127
|
-
{
|
|
128
|
-
[classes[variant]]: true,
|
|
129
|
-
[classes.collapsed]: variant === 'default' && collapsed,
|
|
130
|
-
},
|
|
131
|
-
classes.root,
|
|
132
|
-
className
|
|
133
|
-
)}
|
|
134
148
|
variant={
|
|
135
149
|
['bordered', 'withHeaderBar'].includes(variant) ? 'white' : undefined
|
|
136
150
|
}
|
|
137
151
|
style={style}
|
|
138
152
|
{...rest}
|
|
153
|
+
className={twMerge(
|
|
154
|
+
'pt-8',
|
|
155
|
+
classesByVariant[variant],
|
|
156
|
+
variant === 'default' && collapsed && 'pb-8',
|
|
157
|
+
className
|
|
158
|
+
)}
|
|
139
159
|
>
|
|
140
160
|
{hasHeader && (
|
|
141
161
|
<Container
|
|
142
162
|
data-testid={testIds?.header}
|
|
143
|
-
className={
|
|
144
|
-
[
|
|
145
|
-
[
|
|
146
|
-
|
|
163
|
+
className={twJoin(
|
|
164
|
+
classesByHeader[variant],
|
|
165
|
+
collapsed && classesByCollapsedHeader[variant]
|
|
166
|
+
)}
|
|
147
167
|
>
|
|
148
168
|
{renderTitle()}
|
|
149
169
|
{renderSubtitle()}
|
|
@@ -151,7 +171,7 @@ export const Section = forwardRef<HTMLDivElement, Props>(function Section(
|
|
|
151
171
|
</Container>
|
|
152
172
|
)}
|
|
153
173
|
<Collapse in={!collapsed} unmountOnExit>
|
|
154
|
-
<Container className={
|
|
174
|
+
<Container className={variant === 'withHeaderBar' ? 'p-6' : ''}>
|
|
155
175
|
{children}
|
|
156
176
|
</Container>
|
|
157
177
|
</Collapse>
|
|
@@ -6,14 +6,14 @@ exports[`Section renders collapsible initially collapsed 1`] = `
|
|
|
6
6
|
class="Picasso-root"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
|
-
class="
|
|
9
|
+
class="pt-8 [&>:last-child:not(:first-child)]:mt-6 pb-8"
|
|
10
10
|
>
|
|
11
11
|
<div
|
|
12
|
-
class="
|
|
12
|
+
class="flex pb-0"
|
|
13
13
|
data-testid="header"
|
|
14
14
|
>
|
|
15
15
|
<div
|
|
16
|
-
class="
|
|
16
|
+
class="PicassoContainer-flex ml-auto"
|
|
17
17
|
data-testid="actions"
|
|
18
18
|
>
|
|
19
19
|
<button
|
|
@@ -52,14 +52,14 @@ exports[`Section renders collapsible initially expanded 1`] = `
|
|
|
52
52
|
class="Picasso-root"
|
|
53
53
|
>
|
|
54
54
|
<div
|
|
55
|
-
class="
|
|
55
|
+
class="pt-8 [&>:last-child:not(:first-child)]:mt-6"
|
|
56
56
|
>
|
|
57
57
|
<div
|
|
58
|
-
class="
|
|
58
|
+
class="flex"
|
|
59
59
|
data-testid="header"
|
|
60
60
|
>
|
|
61
61
|
<div
|
|
62
|
-
class="
|
|
62
|
+
class="PicassoContainer-flex ml-auto"
|
|
63
63
|
data-testid="actions"
|
|
64
64
|
>
|
|
65
65
|
<button
|
|
@@ -88,22 +88,17 @@ exports[`Section renders collapsible initially expanded 1`] = `
|
|
|
88
88
|
</div>
|
|
89
89
|
</div>
|
|
90
90
|
<div
|
|
91
|
-
class="
|
|
92
|
-
style="min-height: 0px;"
|
|
91
|
+
class="flex"
|
|
93
92
|
>
|
|
94
93
|
<div
|
|
95
|
-
class="
|
|
94
|
+
class="w-full"
|
|
96
95
|
>
|
|
97
96
|
<div
|
|
98
|
-
class="
|
|
97
|
+
class=""
|
|
99
98
|
>
|
|
100
99
|
<div
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
<div
|
|
104
|
-
data-testid="content"
|
|
105
|
-
/>
|
|
106
|
-
</div>
|
|
100
|
+
data-testid="content"
|
|
101
|
+
/>
|
|
107
102
|
</div>
|
|
108
103
|
</div>
|
|
109
104
|
</div>
|
|
@@ -118,14 +113,14 @@ exports[`Section renders with title, subtitle, actions and content 1`] = `
|
|
|
118
113
|
class="Picasso-root"
|
|
119
114
|
>
|
|
120
115
|
<div
|
|
121
|
-
class="
|
|
116
|
+
class="pt-8 [&>:last-child:not(:first-child)]:mt-6"
|
|
122
117
|
>
|
|
123
118
|
<div
|
|
124
|
-
class="
|
|
119
|
+
class="flex"
|
|
125
120
|
data-testid="header"
|
|
126
121
|
>
|
|
127
122
|
<h3
|
|
128
|
-
class="m-0 text-lg text-black font-semibold
|
|
123
|
+
class="m-0 text-lg text-black font-semibold mr-4 min-w"
|
|
129
124
|
data-testid="title"
|
|
130
125
|
>
|
|
131
126
|
Title
|
|
@@ -137,29 +132,24 @@ exports[`Section renders with title, subtitle, actions and content 1`] = `
|
|
|
137
132
|
Subtitle
|
|
138
133
|
</p>
|
|
139
134
|
<div
|
|
140
|
-
class="
|
|
135
|
+
class="PicassoContainer-flex ml-auto"
|
|
141
136
|
data-testid="actions"
|
|
142
137
|
>
|
|
143
138
|
Actions
|
|
144
139
|
</div>
|
|
145
140
|
</div>
|
|
146
141
|
<div
|
|
147
|
-
class="
|
|
148
|
-
style="min-height: 0px;"
|
|
142
|
+
class="flex"
|
|
149
143
|
>
|
|
150
144
|
<div
|
|
151
|
-
class="
|
|
145
|
+
class="w-full"
|
|
152
146
|
>
|
|
153
147
|
<div
|
|
154
|
-
class="
|
|
148
|
+
class=""
|
|
155
149
|
>
|
|
156
150
|
<div
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
<div
|
|
160
|
-
data-testid="content"
|
|
161
|
-
/>
|
|
162
|
-
</div>
|
|
151
|
+
data-testid="content"
|
|
152
|
+
/>
|
|
163
153
|
</div>
|
|
164
154
|
</div>
|
|
165
155
|
</div>
|
|
@@ -174,25 +164,20 @@ exports[`Section renders without header 1`] = `
|
|
|
174
164
|
class="Picasso-root"
|
|
175
165
|
>
|
|
176
166
|
<div
|
|
177
|
-
class="
|
|
167
|
+
class="pt-8 [&>:last-child:not(:first-child)]:mt-6"
|
|
178
168
|
>
|
|
179
169
|
<div
|
|
180
|
-
class="
|
|
181
|
-
style="min-height: 0px;"
|
|
170
|
+
class="flex"
|
|
182
171
|
>
|
|
183
172
|
<div
|
|
184
|
-
class="
|
|
173
|
+
class="w-full"
|
|
185
174
|
>
|
|
186
175
|
<div
|
|
187
|
-
class="
|
|
176
|
+
class=""
|
|
188
177
|
>
|
|
189
178
|
<div
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
<div
|
|
193
|
-
data-testid="content"
|
|
194
|
-
/>
|
|
195
|
-
</div>
|
|
179
|
+
data-testid="content"
|
|
180
|
+
/>
|
|
196
181
|
</div>
|
|
197
182
|
</div>
|
|
198
183
|
</div>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { Theme } from '@material-ui/core';
|
|
2
|
-
declare const _default: ({ sizes, palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "default" | "title" | "subtitle" | "actions" | "collapsed" | "bordered" | "withHeaderBar" | "defaultHeader" | "borderedHeader" | "withHeaderBarHeader" | "defaultCollapsedHeader" | "borderedCollapsedHeader" | "withHeaderBarCollapsedHeader" | "defaultSectionContent" | "borderedSectionContent" | "withHeaderBarSectionContent">;
|
|
3
|
-
export default _default;
|
|
4
|
-
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Section/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;6CAiBV,KAAK;AAAzC,wBA2DI"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { createStyles } from '@material-ui/core';
|
|
2
|
-
const defaultHeader = {
|
|
3
|
-
display: 'flex',
|
|
4
|
-
};
|
|
5
|
-
const defaultCollapsedHeader = {
|
|
6
|
-
paddingBottom: '0',
|
|
7
|
-
};
|
|
8
|
-
const defaultSection = {
|
|
9
|
-
'& > :last-child:not(:first-child)': {
|
|
10
|
-
marginTop: '1.5rem',
|
|
11
|
-
},
|
|
12
|
-
};
|
|
13
|
-
export default ({ sizes, palette }) => createStyles({
|
|
14
|
-
root: {
|
|
15
|
-
paddingTop: '2rem',
|
|
16
|
-
},
|
|
17
|
-
title: {
|
|
18
|
-
marginRight: '1rem',
|
|
19
|
-
minWidth: 0,
|
|
20
|
-
},
|
|
21
|
-
subtitle: {
|
|
22
|
-
alignSelf: 'center',
|
|
23
|
-
marginRight: '1rem',
|
|
24
|
-
minWidth: 0,
|
|
25
|
-
},
|
|
26
|
-
actions: {
|
|
27
|
-
display: 'flex',
|
|
28
|
-
marginLeft: 'auto',
|
|
29
|
-
},
|
|
30
|
-
collapsed: {
|
|
31
|
-
paddingBottom: '2rem',
|
|
32
|
-
},
|
|
33
|
-
default: defaultSection,
|
|
34
|
-
bordered: Object.assign(Object.assign({}, defaultSection), { borderRadius: sizes.borderRadius.medium, border: `solid ${sizes.borderWidth} ${palette.grey.light}`, padding: '2rem', '& > :last-child': {
|
|
35
|
-
paddingBottom: '0',
|
|
36
|
-
} }),
|
|
37
|
-
withHeaderBar: {
|
|
38
|
-
padding: 0,
|
|
39
|
-
borderRadius: sizes.borderRadius.medium,
|
|
40
|
-
border: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
|
|
41
|
-
},
|
|
42
|
-
defaultHeader,
|
|
43
|
-
borderedHeader: defaultHeader,
|
|
44
|
-
withHeaderBarHeader: {
|
|
45
|
-
display: 'flex',
|
|
46
|
-
padding: '0.75rem 1rem',
|
|
47
|
-
borderRadius: `${sizes.borderRadius.medium} ${sizes.borderRadius.medium} 0 0`,
|
|
48
|
-
borderBottom: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
|
|
49
|
-
backgroundColor: palette.grey.lighter,
|
|
50
|
-
},
|
|
51
|
-
defaultCollapsedHeader,
|
|
52
|
-
borderedCollapsedHeader: defaultCollapsedHeader,
|
|
53
|
-
withHeaderBarCollapsedHeader: {
|
|
54
|
-
borderBottomWidth: '0px',
|
|
55
|
-
borderRadius: sizes.borderRadius.medium,
|
|
56
|
-
transitionDelay: '300ms',
|
|
57
|
-
},
|
|
58
|
-
defaultSectionContent: {},
|
|
59
|
-
borderedSectionContent: {},
|
|
60
|
-
withHeaderBarSectionContent: {
|
|
61
|
-
padding: '1.5rem',
|
|
62
|
-
},
|
|
63
|
-
});
|
|
64
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Section/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,sBAAsB,GAAG;IAC7B,aAAa,EAAE,GAAG;CACnB,CAAA;AAED,MAAM,cAAc,GAAG;IACrB,mCAAmC,EAAE;QACnC,SAAS,EAAE,QAAQ;KACpB;CACF,CAAA;AAED,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,EAAS,EAAE,EAAE,CAC3C,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM;KACnB;IACD,KAAK,EAAE;QACL,WAAW,EAAE,MAAM;QACnB,QAAQ,EAAE,CAAC;KACZ;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,QAAQ;QACnB,WAAW,EAAE,MAAM;QACnB,QAAQ,EAAE,CAAC;KACZ;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,MAAM;KACnB;IAED,SAAS,EAAE;QACT,aAAa,EAAE,MAAM;KACtB;IACD,OAAO,EAAE,cAAc;IACvB,QAAQ,kCACH,cAAc,KACjB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,EACvC,MAAM,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,EAC1D,OAAO,EAAE,MAAM,EACf,iBAAiB,EAAE;YACjB,aAAa,EAAE,GAAG;SACnB,GACF;IACD,aAAa,EAAE;QACb,OAAO,EAAE,CAAC;QACV,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM;QACvC,MAAM,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;KAC5D;IACD,aAAa;IACb,cAAc,EAAE,aAAa;IAC7B,mBAAmB,EAAE;QACnB,OAAO,EAAE,MAAM;QACf,OAAO,EAAE,cAAc;QACvB,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,MAAM;QAC7E,YAAY,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QACjE,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KACtC;IAED,sBAAsB;IACtB,uBAAuB,EAAE,sBAAsB;IAC/C,4BAA4B,EAAE;QAC5B,iBAAiB,EAAE,KAAK;QACxB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM;QACvC,eAAe,EAAE,OAAO;KACzB;IACD,qBAAqB,EAAE,EAAE;IACzB,sBAAsB,EAAE,EAAE;IAC1B,2BAA2B,EAAE;QAC3B,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC,CAAA"}
|
package/src/Section/styles.ts
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import type { Theme } from '@material-ui/core'
|
|
2
|
-
import { createStyles } from '@material-ui/core'
|
|
3
|
-
|
|
4
|
-
const defaultHeader = {
|
|
5
|
-
display: 'flex',
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
const defaultCollapsedHeader = {
|
|
9
|
-
paddingBottom: '0',
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const defaultSection = {
|
|
13
|
-
'& > :last-child:not(:first-child)': {
|
|
14
|
-
marginTop: '1.5rem',
|
|
15
|
-
},
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export default ({ sizes, palette }: Theme) =>
|
|
19
|
-
createStyles({
|
|
20
|
-
root: {
|
|
21
|
-
paddingTop: '2rem',
|
|
22
|
-
},
|
|
23
|
-
title: {
|
|
24
|
-
marginRight: '1rem',
|
|
25
|
-
minWidth: 0,
|
|
26
|
-
},
|
|
27
|
-
subtitle: {
|
|
28
|
-
alignSelf: 'center',
|
|
29
|
-
marginRight: '1rem',
|
|
30
|
-
minWidth: 0,
|
|
31
|
-
},
|
|
32
|
-
actions: {
|
|
33
|
-
display: 'flex',
|
|
34
|
-
marginLeft: 'auto',
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
collapsed: {
|
|
38
|
-
paddingBottom: '2rem',
|
|
39
|
-
},
|
|
40
|
-
default: defaultSection,
|
|
41
|
-
bordered: {
|
|
42
|
-
...defaultSection,
|
|
43
|
-
borderRadius: sizes.borderRadius.medium,
|
|
44
|
-
border: `solid ${sizes.borderWidth} ${palette.grey.light}`,
|
|
45
|
-
padding: '2rem',
|
|
46
|
-
'& > :last-child': {
|
|
47
|
-
paddingBottom: '0',
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
|
-
withHeaderBar: {
|
|
51
|
-
padding: 0,
|
|
52
|
-
borderRadius: sizes.borderRadius.medium,
|
|
53
|
-
border: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
|
|
54
|
-
},
|
|
55
|
-
defaultHeader,
|
|
56
|
-
borderedHeader: defaultHeader,
|
|
57
|
-
withHeaderBarHeader: {
|
|
58
|
-
display: 'flex',
|
|
59
|
-
padding: '0.75rem 1rem',
|
|
60
|
-
borderRadius: `${sizes.borderRadius.medium} ${sizes.borderRadius.medium} 0 0`,
|
|
61
|
-
borderBottom: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
|
|
62
|
-
backgroundColor: palette.grey.lighter,
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
defaultCollapsedHeader,
|
|
66
|
-
borderedCollapsedHeader: defaultCollapsedHeader,
|
|
67
|
-
withHeaderBarCollapsedHeader: {
|
|
68
|
-
borderBottomWidth: '0px',
|
|
69
|
-
borderRadius: sizes.borderRadius.medium,
|
|
70
|
-
transitionDelay: '300ms',
|
|
71
|
-
},
|
|
72
|
-
defaultSectionContent: {},
|
|
73
|
-
borderedSectionContent: {},
|
|
74
|
-
withHeaderBarSectionContent: {
|
|
75
|
-
padding: '1.5rem',
|
|
76
|
-
},
|
|
77
|
-
})
|