@toptal/picasso-timeline 3.0.1 → 5.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/Timeline/Timeline.d.ts.map +1 -1
- package/dist-package/src/Timeline/Timeline.js +2 -8
- package/dist-package/src/Timeline/Timeline.js.map +1 -1
- package/dist-package/src/TimelineRow/TimelineRow.d.ts.map +1 -1
- package/dist-package/src/TimelineRow/TimelineRow.js +12 -17
- package/dist-package/src/TimelineRow/TimelineRow.js.map +1 -1
- package/package.json +5 -5
- package/src/Timeline/Timeline.tsx +2 -10
- package/src/Timeline/__snapshots__/test.tsx.snap +93 -93
- package/src/TimelineRow/TimelineRow.tsx +26 -20
- package/dist-package/src/Timeline/styles.d.ts +0 -3
- package/dist-package/src/Timeline/styles.d.ts.map +0 -1
- package/dist-package/src/Timeline/styles.js +0 -9
- package/dist-package/src/Timeline/styles.js.map +0 -1
- package/dist-package/src/TimelineRow/styles.d.ts +0 -4
- package/dist-package/src/TimelineRow/styles.d.ts.map +0 -1
- package/dist-package/src/TimelineRow/styles.js +0 -54
- package/dist-package/src/TimelineRow/styles.js.map +0 -1
- package/src/Timeline/styles.ts +0 -10
- package/src/TimelineRow/styles.ts +0 -57
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,oBAAY,KAAK,GAAG,SAAS,GAAG;IAC9B,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,QAAQ;IAJnB,oBAAoB;cACV,MAAM,SAAS;wCAYzB,CAAA;;IAbA,oBAAoB;;;;;;;;;;;AAiBtB,wBAA4D"}
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import cx from 'classnames';
|
|
3
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
4
2
|
import { Container } from '@toptal/picasso-container';
|
|
3
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
5
4
|
import { TimelineRow } from '../TimelineRow';
|
|
6
|
-
import styles from './styles';
|
|
7
|
-
const useStyles = makeStyles(styles, {
|
|
8
|
-
name: 'PicassoTimeline',
|
|
9
|
-
});
|
|
10
5
|
export const Timeline = forwardRef(function Timeline({ className, children }, ref) {
|
|
11
|
-
|
|
12
|
-
return (React.createElement(Container, { ref: ref, className: cx(classes.root, className) }, children));
|
|
6
|
+
return (React.createElement(Container, { ref: ref, className: twMerge('table h-fit w-fit', className) }, children));
|
|
13
7
|
});
|
|
14
8
|
Timeline.displayName = 'Timeline';
|
|
15
9
|
export default Object.assign(Timeline, { Row: TimelineRow });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,EAAE,SAAS,EAAE,QAAQ,EAAE,EACvB,GAAG;IAEH,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,mBAAmB,EAAE,SAAS,CAAC,IACpE,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineRow.d.ts","sourceRoot":"","sources":["../../../src/TimelineRow/TimelineRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"TimelineRow.d.ts","sourceRoot":"","sources":["../../../src/TimelineRow/TimelineRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAA;IACnB,qCAAqC;IACrC,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,OAAO,CAAC,EAAE;QACR,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAID,QAAA,MAAM,WAAW;6FAQd,KAAK;;;;;CAgEP,CAAA;AAQD,eAAe,WAAW,CAAA"}
|
|
@@ -1,26 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
3
|
-
import cx from 'classnames';
|
|
4
2
|
import { Container } from '@toptal/picasso-container';
|
|
5
3
|
import { Typography } from '@toptal/picasso-typography';
|
|
6
|
-
import
|
|
7
|
-
const
|
|
8
|
-
name: 'PicassoTimelineRow',
|
|
9
|
-
});
|
|
4
|
+
import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
|
|
5
|
+
const tableCellClasses = 'table-cell align-top h-full';
|
|
10
6
|
const TimelineRow = ({ className, children, icon, date, hasConnector, 'data-testid': dataTestId, testIds = {}, }) => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
React.createElement(Container, { flex: true, direction: 'column', alignItems: 'center', right: 'medium', className: classes.tableCellContent },
|
|
7
|
+
return (React.createElement(Container, { "data-testid": dataTestId, className: twMerge('table-row group', className) },
|
|
8
|
+
React.createElement(Container, { className: tableCellClasses },
|
|
9
|
+
React.createElement(Container, { flex: true, direction: 'column', alignItems: 'center', right: 'medium', className: 'h-full' },
|
|
15
10
|
typeof icon !== 'undefined' ? (React.cloneElement(icon, {
|
|
16
|
-
className:
|
|
17
|
-
})) : (React.createElement("div", { className:
|
|
18
|
-
hasConnector && (React.createElement("div", { className:
|
|
19
|
-
date && (React.createElement(Container, { className:
|
|
20
|
-
React.createElement(Container, { className:
|
|
11
|
+
className: twJoin(icon.props.className, 'my-1 mx-0 text-gray-600'),
|
|
12
|
+
})) : (React.createElement("div", { className: '\n w-4 h-4 flex items-center justify-center bg-white my-1 mx-0\n\n [&:after]:content-[""]\n [&:after]:w-[9px]\n [&:after]:h-[9px]\n [&:after]:bg-gray-600\n [&:after]:rounded-[50%] [&:after]:leading-5\n ', "data-testid": testIds.dot })),
|
|
13
|
+
hasConnector && (React.createElement("div", { className: 'flex-1 w-0 border-dashed border-0 border-l border-gray-600', "data-testid": testIds.connector })))),
|
|
14
|
+
date && (React.createElement(Container, { className: tableCellClasses, style: { whiteSpace: 'nowrap' } },
|
|
15
|
+
React.createElement(Container, { className: 'flex-[0_0_auto]', right: 'large' },
|
|
21
16
|
React.createElement(Typography, { className: 'leading-6', weight: 'semibold', size: 'medium' }, date)))),
|
|
22
|
-
React.createElement(Container, { className:
|
|
23
|
-
React.createElement(Container, { className:
|
|
17
|
+
React.createElement(Container, { className: tableCellClasses },
|
|
18
|
+
React.createElement(Container, { className: 'grow group-last:mb-0', bottom: 'large' }, children))));
|
|
24
19
|
};
|
|
25
20
|
TimelineRow.defaultProps = {
|
|
26
21
|
hasConnector: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineRow.js","sourceRoot":"","sources":["../../../src/TimelineRow/TimelineRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"TimelineRow.js","sourceRoot":"","sources":["../../../src/TimelineRow/TimelineRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAiBhE,MAAM,gBAAgB,GAAG,6BAA6B,CAAA;AAEtD,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,aAAa,EAAE,UAAU,EACzB,OAAO,GAAG,EAAE,GACN,EAAE,EAAE;IACV,OAAO,CACL,oBAAC,SAAS,mBACK,UAAU,EACvB,SAAS,EAAE,OAAO,CAAC,iBAAiB,EAAE,SAAS,CAAC;QAEhD,oBAAC,SAAS,IAAC,SAAS,EAAE,gBAAgB;YACpC,oBAAC,SAAS,IACR,IAAI,QACJ,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAC,QAAQ,EACnB,KAAK,EAAC,QAAQ,EACd,SAAS,EAAC,QAAQ;gBAEjB,OAAO,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,CAC7B,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;oBACvB,SAAS,EAAE,MAAM,CACf,IAAI,CAAC,KAAK,CAAC,SAAS,EACpB,yBAAyB,CAC1B;iBACF,CAAC,CACH,CAAC,CAAC,CAAC,CACF,6BACE,SAAS,EAAC,yRAQX,iBACc,OAAO,CAAC,GAAG,GACxB,CACH;gBACA,YAAY,IAAI,CACf,6BACE,SAAS,EAAC,4DAA4D,iBACzD,OAAO,CAAC,SAAS,GAC9B,CACH,CACS,CACF;QAEX,IAAI,IAAI,CACP,oBAAC,SAAS,IACR,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;YAE/B,oBAAC,SAAS,IAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAC,OAAO;gBAClD,oBAAC,UAAU,IAAC,SAAS,EAAC,WAAW,EAAC,MAAM,EAAC,UAAU,EAAC,IAAI,EAAC,QAAQ,IAC9D,IAAI,CACM,CACH,CACF,CACb;QAED,oBAAC,SAAS,IAAC,SAAS,EAAE,gBAAgB;YACpC,oBAAC,SAAS,IAAC,SAAS,EAAC,sBAAsB,EAAC,MAAM,EAAC,OAAO,IACvD,QAAQ,CACC,CACF,CACF,CACb,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,YAAY,EAAE,IAAI;CACnB,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-timeline",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"description": "Toptal UI components library - Timeline",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -25,15 +25,14 @@
|
|
|
25
25
|
"@toptal/picasso-container": "3.0.0",
|
|
26
26
|
"@toptal/picasso-shared": "15.0.0",
|
|
27
27
|
"@toptal/picasso-typography": "4.0.0",
|
|
28
|
-
"@toptal/picasso-utils": "1.0.3"
|
|
29
|
-
"classnames": "^2.5.1"
|
|
28
|
+
"@toptal/picasso-utils": "1.0.3"
|
|
30
29
|
},
|
|
31
30
|
"sideEffects": [
|
|
32
31
|
"**/styles.ts",
|
|
33
32
|
"**/styles.js"
|
|
34
33
|
],
|
|
35
34
|
"peerDependencies": {
|
|
36
|
-
"@
|
|
35
|
+
"@toptal/picasso-tailwind-merge": "^2.0.0",
|
|
37
36
|
"@toptal/picasso-tailwind": ">=2.7",
|
|
38
37
|
"react": ">=16.12.0 < 19.0.0"
|
|
39
38
|
},
|
|
@@ -41,7 +40,8 @@
|
|
|
41
40
|
".": "./dist-package/src/index.js"
|
|
42
41
|
},
|
|
43
42
|
"devDependencies": {
|
|
44
|
-
"@toptal/picasso-test-utils": "1.1.1"
|
|
43
|
+
"@toptal/picasso-test-utils": "1.1.1",
|
|
44
|
+
"@toptal/picasso-tailwind-merge": "2.0.0"
|
|
45
45
|
},
|
|
46
46
|
"files": [
|
|
47
47
|
"dist-package/**",
|
|
@@ -1,29 +1,21 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react'
|
|
2
2
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
3
|
-
import cx from 'classnames'
|
|
4
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
5
3
|
import { Container } from '@toptal/picasso-container'
|
|
4
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
6
5
|
|
|
7
6
|
import { TimelineRow } from '../TimelineRow'
|
|
8
|
-
import styles from './styles'
|
|
9
7
|
|
|
10
8
|
export type Props = BaseProps & {
|
|
11
9
|
/** Timeline rows */
|
|
12
10
|
children: React.ReactNode
|
|
13
11
|
}
|
|
14
12
|
|
|
15
|
-
const useStyles = makeStyles(styles, {
|
|
16
|
-
name: 'PicassoTimeline',
|
|
17
|
-
})
|
|
18
|
-
|
|
19
13
|
export const Timeline = forwardRef<HTMLDivElement, Props>(function Timeline(
|
|
20
14
|
{ className, children },
|
|
21
15
|
ref
|
|
22
16
|
) {
|
|
23
|
-
const classes = useStyles()
|
|
24
|
-
|
|
25
17
|
return (
|
|
26
|
-
<Container ref={ref} className={
|
|
18
|
+
<Container ref={ref} className={twMerge('table h-fit w-fit', className)}>
|
|
27
19
|
{children}
|
|
28
20
|
</Container>
|
|
29
21
|
)
|
|
@@ -9,87 +9,87 @@ exports[`Timeline renders 1`] = `
|
|
|
9
9
|
class="Picasso-root"
|
|
10
10
|
>
|
|
11
11
|
<div
|
|
12
|
-
class="
|
|
12
|
+
class="table h-fit w-fit"
|
|
13
13
|
>
|
|
14
14
|
<div
|
|
15
|
-
class="
|
|
15
|
+
class="table-row group"
|
|
16
16
|
>
|
|
17
17
|
<div
|
|
18
|
-
class="
|
|
18
|
+
class="table-cell align-top h-full"
|
|
19
19
|
>
|
|
20
20
|
<div
|
|
21
|
-
class="mr-6 items-center flex flex-col
|
|
21
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
22
22
|
>
|
|
23
23
|
<div
|
|
24
|
-
class="
|
|
24
|
+
class="w-4 h-4 flex items-center justify-center bg-white my-1 mx-0 [&:after]:content-[""] [&:after]:w-[9px] [&:after]:h-[9px] [&:after]:bg-gray [&:after]:rounded-[50%] [&:after]:leading-5"
|
|
25
25
|
data-testid="dot"
|
|
26
26
|
/>
|
|
27
27
|
<div
|
|
28
|
-
class="
|
|
28
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
29
29
|
/>
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
32
32
|
<div
|
|
33
|
-
class="
|
|
33
|
+
class="table-cell align-top h-full"
|
|
34
34
|
>
|
|
35
35
|
<div
|
|
36
|
-
class="mb-8
|
|
36
|
+
class="mb-8 grow group-last:mb-0"
|
|
37
37
|
>
|
|
38
38
|
Row #1
|
|
39
39
|
</div>
|
|
40
40
|
</div>
|
|
41
41
|
</div>
|
|
42
42
|
<div
|
|
43
|
-
class="
|
|
43
|
+
class="table-row group"
|
|
44
44
|
>
|
|
45
45
|
<div
|
|
46
|
-
class="
|
|
46
|
+
class="table-cell align-top h-full"
|
|
47
47
|
>
|
|
48
48
|
<div
|
|
49
|
-
class="mr-6 items-center flex flex-col
|
|
49
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
50
50
|
>
|
|
51
51
|
<div
|
|
52
|
-
class="
|
|
52
|
+
class="w-4 h-4 flex items-center justify-center bg-white my-1 mx-0 [&:after]:content-[""] [&:after]:w-[9px] [&:after]:h-[9px] [&:after]:bg-gray [&:after]:rounded-[50%] [&:after]:leading-5"
|
|
53
53
|
data-testid="dot"
|
|
54
54
|
/>
|
|
55
55
|
<div
|
|
56
|
-
class="
|
|
56
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
57
57
|
/>
|
|
58
58
|
</div>
|
|
59
59
|
</div>
|
|
60
60
|
<div
|
|
61
|
-
class="
|
|
61
|
+
class="table-cell align-top h-full"
|
|
62
62
|
>
|
|
63
63
|
<div
|
|
64
|
-
class="mb-8
|
|
64
|
+
class="mb-8 grow group-last:mb-0"
|
|
65
65
|
>
|
|
66
66
|
Row #2
|
|
67
67
|
</div>
|
|
68
68
|
</div>
|
|
69
69
|
</div>
|
|
70
70
|
<div
|
|
71
|
-
class="
|
|
71
|
+
class="table-row group"
|
|
72
72
|
>
|
|
73
73
|
<div
|
|
74
|
-
class="
|
|
74
|
+
class="table-cell align-top h-full"
|
|
75
75
|
>
|
|
76
76
|
<div
|
|
77
|
-
class="mr-6 items-center flex flex-col
|
|
77
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
78
78
|
>
|
|
79
79
|
<div
|
|
80
|
-
class="
|
|
80
|
+
class="w-4 h-4 flex items-center justify-center bg-white my-1 mx-0 [&:after]:content-[""] [&:after]:w-[9px] [&:after]:h-[9px] [&:after]:bg-gray [&:after]:rounded-[50%] [&:after]:leading-5"
|
|
81
81
|
data-testid="dot"
|
|
82
82
|
/>
|
|
83
83
|
<div
|
|
84
|
-
class="
|
|
84
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
85
85
|
/>
|
|
86
86
|
</div>
|
|
87
87
|
</div>
|
|
88
88
|
<div
|
|
89
|
-
class="
|
|
89
|
+
class="table-cell align-top h-full"
|
|
90
90
|
>
|
|
91
91
|
<div
|
|
92
|
-
class="mb-8
|
|
92
|
+
class="mb-8 grow group-last:mb-0"
|
|
93
93
|
>
|
|
94
94
|
Row #3
|
|
95
95
|
</div>
|
|
@@ -110,31 +110,31 @@ exports[`Timeline renders with dates 1`] = `
|
|
|
110
110
|
class="Picasso-root"
|
|
111
111
|
>
|
|
112
112
|
<div
|
|
113
|
-
class="
|
|
113
|
+
class="table h-fit w-fit"
|
|
114
114
|
>
|
|
115
115
|
<div
|
|
116
|
-
class="
|
|
116
|
+
class="table-row group"
|
|
117
117
|
>
|
|
118
118
|
<div
|
|
119
|
-
class="
|
|
119
|
+
class="table-cell align-top h-full"
|
|
120
120
|
>
|
|
121
121
|
<div
|
|
122
|
-
class="mr-6 items-center flex flex-col
|
|
122
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
123
123
|
>
|
|
124
124
|
<div
|
|
125
|
-
class="
|
|
125
|
+
class="w-4 h-4 flex items-center justify-center bg-white my-1 mx-0 [&:after]:content-[""] [&:after]:w-[9px] [&:after]:h-[9px] [&:after]:bg-gray [&:after]:rounded-[50%] [&:after]:leading-5"
|
|
126
126
|
/>
|
|
127
127
|
<div
|
|
128
|
-
class="
|
|
128
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
129
129
|
/>
|
|
130
130
|
</div>
|
|
131
131
|
</div>
|
|
132
132
|
<div
|
|
133
|
-
class="
|
|
133
|
+
class="table-cell align-top h-full"
|
|
134
134
|
style="white-space: nowrap;"
|
|
135
135
|
>
|
|
136
136
|
<div
|
|
137
|
-
class="mr-8
|
|
137
|
+
class="mr-8 flex-[0_0_auto]"
|
|
138
138
|
>
|
|
139
139
|
<p
|
|
140
140
|
class="m-0 text-md text-graphite font-semibold leading-6"
|
|
@@ -144,38 +144,38 @@ exports[`Timeline renders with dates 1`] = `
|
|
|
144
144
|
</div>
|
|
145
145
|
</div>
|
|
146
146
|
<div
|
|
147
|
-
class="
|
|
147
|
+
class="table-cell align-top h-full"
|
|
148
148
|
>
|
|
149
149
|
<div
|
|
150
|
-
class="mb-8
|
|
150
|
+
class="mb-8 grow group-last:mb-0"
|
|
151
151
|
>
|
|
152
152
|
Row #1
|
|
153
153
|
</div>
|
|
154
154
|
</div>
|
|
155
155
|
</div>
|
|
156
156
|
<div
|
|
157
|
-
class="
|
|
157
|
+
class="table-row group"
|
|
158
158
|
>
|
|
159
159
|
<div
|
|
160
|
-
class="
|
|
160
|
+
class="table-cell align-top h-full"
|
|
161
161
|
>
|
|
162
162
|
<div
|
|
163
|
-
class="mr-6 items-center flex flex-col
|
|
163
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
164
164
|
>
|
|
165
165
|
<div
|
|
166
|
-
class="
|
|
166
|
+
class="w-4 h-4 flex items-center justify-center bg-white my-1 mx-0 [&:after]:content-[""] [&:after]:w-[9px] [&:after]:h-[9px] [&:after]:bg-gray [&:after]:rounded-[50%] [&:after]:leading-5"
|
|
167
167
|
/>
|
|
168
168
|
<div
|
|
169
|
-
class="
|
|
169
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
170
170
|
/>
|
|
171
171
|
</div>
|
|
172
172
|
</div>
|
|
173
173
|
<div
|
|
174
|
-
class="
|
|
174
|
+
class="table-cell align-top h-full"
|
|
175
175
|
style="white-space: nowrap;"
|
|
176
176
|
>
|
|
177
177
|
<div
|
|
178
|
-
class="mr-8
|
|
178
|
+
class="mr-8 flex-[0_0_auto]"
|
|
179
179
|
>
|
|
180
180
|
<p
|
|
181
181
|
class="m-0 text-md text-graphite font-semibold leading-6"
|
|
@@ -185,38 +185,38 @@ exports[`Timeline renders with dates 1`] = `
|
|
|
185
185
|
</div>
|
|
186
186
|
</div>
|
|
187
187
|
<div
|
|
188
|
-
class="
|
|
188
|
+
class="table-cell align-top h-full"
|
|
189
189
|
>
|
|
190
190
|
<div
|
|
191
|
-
class="mb-8
|
|
191
|
+
class="mb-8 grow group-last:mb-0"
|
|
192
192
|
>
|
|
193
193
|
Row #2
|
|
194
194
|
</div>
|
|
195
195
|
</div>
|
|
196
196
|
</div>
|
|
197
197
|
<div
|
|
198
|
-
class="
|
|
198
|
+
class="table-row group"
|
|
199
199
|
>
|
|
200
200
|
<div
|
|
201
|
-
class="
|
|
201
|
+
class="table-cell align-top h-full"
|
|
202
202
|
>
|
|
203
203
|
<div
|
|
204
|
-
class="mr-6 items-center flex flex-col
|
|
204
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
205
205
|
>
|
|
206
206
|
<div
|
|
207
|
-
class="
|
|
207
|
+
class="w-4 h-4 flex items-center justify-center bg-white my-1 mx-0 [&:after]:content-[""] [&:after]:w-[9px] [&:after]:h-[9px] [&:after]:bg-gray [&:after]:rounded-[50%] [&:after]:leading-5"
|
|
208
208
|
/>
|
|
209
209
|
<div
|
|
210
|
-
class="
|
|
210
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
211
211
|
/>
|
|
212
212
|
</div>
|
|
213
213
|
</div>
|
|
214
214
|
<div
|
|
215
|
-
class="
|
|
215
|
+
class="table-cell align-top h-full"
|
|
216
216
|
style="white-space: nowrap;"
|
|
217
217
|
>
|
|
218
218
|
<div
|
|
219
|
-
class="mr-8
|
|
219
|
+
class="mr-8 flex-[0_0_auto]"
|
|
220
220
|
>
|
|
221
221
|
<p
|
|
222
222
|
class="m-0 text-md text-graphite font-semibold leading-6"
|
|
@@ -226,10 +226,10 @@ exports[`Timeline renders with dates 1`] = `
|
|
|
226
226
|
</div>
|
|
227
227
|
</div>
|
|
228
228
|
<div
|
|
229
|
-
class="
|
|
229
|
+
class="table-cell align-top h-full"
|
|
230
230
|
>
|
|
231
231
|
<div
|
|
232
|
-
class="mb-8
|
|
232
|
+
class="mb-8 grow group-last:mb-0"
|
|
233
233
|
>
|
|
234
234
|
Row #3
|
|
235
235
|
</div>
|
|
@@ -250,87 +250,87 @@ exports[`Timeline renders with icons 1`] = `
|
|
|
250
250
|
class="Picasso-root"
|
|
251
251
|
>
|
|
252
252
|
<div
|
|
253
|
-
class="
|
|
253
|
+
class="table h-fit w-fit"
|
|
254
254
|
>
|
|
255
255
|
<div
|
|
256
|
-
class="
|
|
256
|
+
class="table-row group"
|
|
257
257
|
>
|
|
258
258
|
<div
|
|
259
|
-
class="
|
|
259
|
+
class="table-cell align-top h-full"
|
|
260
260
|
>
|
|
261
261
|
<div
|
|
262
|
-
class="mr-6 items-center flex flex-col
|
|
262
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
263
263
|
>
|
|
264
264
|
<span
|
|
265
|
-
class="
|
|
265
|
+
class="my-1 mx-0 text-gray"
|
|
266
266
|
data-testid="icon-1"
|
|
267
267
|
/>
|
|
268
268
|
<div
|
|
269
|
-
class="
|
|
269
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
270
270
|
/>
|
|
271
271
|
</div>
|
|
272
272
|
</div>
|
|
273
273
|
<div
|
|
274
|
-
class="
|
|
274
|
+
class="table-cell align-top h-full"
|
|
275
275
|
>
|
|
276
276
|
<div
|
|
277
|
-
class="mb-8
|
|
277
|
+
class="mb-8 grow group-last:mb-0"
|
|
278
278
|
>
|
|
279
279
|
Row #1
|
|
280
280
|
</div>
|
|
281
281
|
</div>
|
|
282
282
|
</div>
|
|
283
283
|
<div
|
|
284
|
-
class="
|
|
284
|
+
class="table-row group"
|
|
285
285
|
>
|
|
286
286
|
<div
|
|
287
|
-
class="
|
|
287
|
+
class="table-cell align-top h-full"
|
|
288
288
|
>
|
|
289
289
|
<div
|
|
290
|
-
class="mr-6 items-center flex flex-col
|
|
290
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
291
291
|
>
|
|
292
292
|
<span
|
|
293
|
-
class="
|
|
293
|
+
class="my-1 mx-0 text-gray"
|
|
294
294
|
data-testid="icon-2"
|
|
295
295
|
/>
|
|
296
296
|
<div
|
|
297
|
-
class="
|
|
297
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
298
298
|
/>
|
|
299
299
|
</div>
|
|
300
300
|
</div>
|
|
301
301
|
<div
|
|
302
|
-
class="
|
|
302
|
+
class="table-cell align-top h-full"
|
|
303
303
|
>
|
|
304
304
|
<div
|
|
305
|
-
class="mb-8
|
|
305
|
+
class="mb-8 grow group-last:mb-0"
|
|
306
306
|
>
|
|
307
307
|
Row #2
|
|
308
308
|
</div>
|
|
309
309
|
</div>
|
|
310
310
|
</div>
|
|
311
311
|
<div
|
|
312
|
-
class="
|
|
312
|
+
class="table-row group"
|
|
313
313
|
>
|
|
314
314
|
<div
|
|
315
|
-
class="
|
|
315
|
+
class="table-cell align-top h-full"
|
|
316
316
|
>
|
|
317
317
|
<div
|
|
318
|
-
class="mr-6 items-center flex flex-col
|
|
318
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
319
319
|
>
|
|
320
320
|
<span
|
|
321
|
-
class="
|
|
321
|
+
class="my-1 mx-0 text-gray"
|
|
322
322
|
data-testid="icon-3"
|
|
323
323
|
/>
|
|
324
324
|
<div
|
|
325
|
-
class="
|
|
325
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
326
326
|
/>
|
|
327
327
|
</div>
|
|
328
328
|
</div>
|
|
329
329
|
<div
|
|
330
|
-
class="
|
|
330
|
+
class="table-cell align-top h-full"
|
|
331
331
|
>
|
|
332
332
|
<div
|
|
333
|
-
class="mb-8
|
|
333
|
+
class="mb-8 grow group-last:mb-0"
|
|
334
334
|
>
|
|
335
335
|
Row #3
|
|
336
336
|
</div>
|
|
@@ -351,86 +351,86 @@ exports[`Timeline renders without a connector 1`] = `
|
|
|
351
351
|
class="Picasso-root"
|
|
352
352
|
>
|
|
353
353
|
<div
|
|
354
|
-
class="
|
|
354
|
+
class="table h-fit w-fit"
|
|
355
355
|
>
|
|
356
356
|
<div
|
|
357
|
-
class="
|
|
357
|
+
class="table-row group"
|
|
358
358
|
>
|
|
359
359
|
<div
|
|
360
|
-
class="
|
|
360
|
+
class="table-cell align-top h-full"
|
|
361
361
|
>
|
|
362
362
|
<div
|
|
363
|
-
class="mr-6 items-center flex flex-col
|
|
363
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
364
364
|
>
|
|
365
365
|
<div
|
|
366
|
-
class="
|
|
366
|
+
class="w-4 h-4 flex items-center justify-center bg-white my-1 mx-0 [&:after]:content-[""] [&:after]:w-[9px] [&:after]:h-[9px] [&:after]:bg-gray [&:after]:rounded-[50%] [&:after]:leading-5"
|
|
367
367
|
data-testid="dot"
|
|
368
368
|
/>
|
|
369
369
|
<div
|
|
370
|
-
class="
|
|
370
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
371
371
|
data-testid="connector"
|
|
372
372
|
/>
|
|
373
373
|
</div>
|
|
374
374
|
</div>
|
|
375
375
|
<div
|
|
376
|
-
class="
|
|
376
|
+
class="table-cell align-top h-full"
|
|
377
377
|
>
|
|
378
378
|
<div
|
|
379
|
-
class="mb-8
|
|
379
|
+
class="mb-8 grow group-last:mb-0"
|
|
380
380
|
>
|
|
381
381
|
Row #1
|
|
382
382
|
</div>
|
|
383
383
|
</div>
|
|
384
384
|
</div>
|
|
385
385
|
<div
|
|
386
|
-
class="
|
|
386
|
+
class="table-row group"
|
|
387
387
|
>
|
|
388
388
|
<div
|
|
389
|
-
class="
|
|
389
|
+
class="table-cell align-top h-full"
|
|
390
390
|
>
|
|
391
391
|
<div
|
|
392
|
-
class="mr-6 items-center flex flex-col
|
|
392
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
393
393
|
>
|
|
394
394
|
<div
|
|
395
|
-
class="
|
|
395
|
+
class="w-4 h-4 flex items-center justify-center bg-white my-1 mx-0 [&:after]:content-[""] [&:after]:w-[9px] [&:after]:h-[9px] [&:after]:bg-gray [&:after]:rounded-[50%] [&:after]:leading-5"
|
|
396
396
|
data-testid="dot"
|
|
397
397
|
/>
|
|
398
398
|
<div
|
|
399
|
-
class="
|
|
399
|
+
class="flex-1 w-0 border-dashed border-0 border-l border-gray"
|
|
400
400
|
data-testid="connector"
|
|
401
401
|
/>
|
|
402
402
|
</div>
|
|
403
403
|
</div>
|
|
404
404
|
<div
|
|
405
|
-
class="
|
|
405
|
+
class="table-cell align-top h-full"
|
|
406
406
|
>
|
|
407
407
|
<div
|
|
408
|
-
class="mb-8
|
|
408
|
+
class="mb-8 grow group-last:mb-0"
|
|
409
409
|
>
|
|
410
410
|
Row #2
|
|
411
411
|
</div>
|
|
412
412
|
</div>
|
|
413
413
|
</div>
|
|
414
414
|
<div
|
|
415
|
-
class="
|
|
415
|
+
class="table-row group"
|
|
416
416
|
>
|
|
417
417
|
<div
|
|
418
|
-
class="
|
|
418
|
+
class="table-cell align-top h-full"
|
|
419
419
|
>
|
|
420
420
|
<div
|
|
421
|
-
class="mr-6 items-center flex flex-col
|
|
421
|
+
class="mr-6 items-center flex flex-col h-full"
|
|
422
422
|
>
|
|
423
423
|
<div
|
|
424
|
-
class="
|
|
424
|
+
class="w-4 h-4 flex items-center justify-center bg-white my-1 mx-0 [&:after]:content-[""] [&:after]:w-[9px] [&:after]:h-[9px] [&:after]:bg-gray [&:after]:rounded-[50%] [&:after]:leading-5"
|
|
425
425
|
data-testid="dot"
|
|
426
426
|
/>
|
|
427
427
|
</div>
|
|
428
428
|
</div>
|
|
429
429
|
<div
|
|
430
|
-
class="
|
|
430
|
+
class="table-cell align-top h-full"
|
|
431
431
|
>
|
|
432
432
|
<div
|
|
433
|
-
class="mb-8
|
|
433
|
+
class="mb-8 grow group-last:mb-0"
|
|
434
434
|
>
|
|
435
435
|
Row #3
|
|
436
436
|
</div>
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import type { ReactElement, ReactNode } from 'react'
|
|
2
2
|
import React from 'react'
|
|
3
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
4
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
5
3
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
6
|
-
import cx from 'classnames'
|
|
7
4
|
import { Container } from '@toptal/picasso-container'
|
|
8
5
|
import { Typography } from '@toptal/picasso-typography'
|
|
9
|
-
|
|
10
|
-
import styles from './styles'
|
|
6
|
+
import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
|
|
11
7
|
|
|
12
8
|
export interface Props extends BaseProps {
|
|
13
9
|
/** Timeline row content */
|
|
@@ -24,9 +20,7 @@ export interface Props extends BaseProps {
|
|
|
24
20
|
}
|
|
25
21
|
}
|
|
26
22
|
|
|
27
|
-
const
|
|
28
|
-
name: 'PicassoTimelineRow',
|
|
29
|
-
})
|
|
23
|
+
const tableCellClasses = 'table-cell align-top h-full'
|
|
30
24
|
|
|
31
25
|
const TimelineRow = ({
|
|
32
26
|
className,
|
|
@@ -37,31 +31,43 @@ const TimelineRow = ({
|
|
|
37
31
|
'data-testid': dataTestId,
|
|
38
32
|
testIds = {},
|
|
39
33
|
}: Props) => {
|
|
40
|
-
const classes = useStyles()
|
|
41
|
-
|
|
42
34
|
return (
|
|
43
35
|
<Container
|
|
44
36
|
data-testid={dataTestId}
|
|
45
|
-
className={
|
|
37
|
+
className={twMerge('table-row group', className)}
|
|
46
38
|
>
|
|
47
|
-
<Container className={
|
|
39
|
+
<Container className={tableCellClasses}>
|
|
48
40
|
<Container
|
|
49
41
|
flex
|
|
50
42
|
direction='column'
|
|
51
43
|
alignItems='center'
|
|
52
44
|
right='medium'
|
|
53
|
-
className=
|
|
45
|
+
className='h-full'
|
|
54
46
|
>
|
|
55
47
|
{typeof icon !== 'undefined' ? (
|
|
56
48
|
React.cloneElement(icon, {
|
|
57
|
-
className:
|
|
49
|
+
className: twJoin(
|
|
50
|
+
icon.props.className,
|
|
51
|
+
'my-1 mx-0 text-gray-600'
|
|
52
|
+
),
|
|
58
53
|
})
|
|
59
54
|
) : (
|
|
60
|
-
<div
|
|
55
|
+
<div
|
|
56
|
+
className='
|
|
57
|
+
w-4 h-4 flex items-center justify-center bg-white my-1 mx-0
|
|
58
|
+
|
|
59
|
+
[&:after]:content-[""]
|
|
60
|
+
[&:after]:w-[9px]
|
|
61
|
+
[&:after]:h-[9px]
|
|
62
|
+
[&:after]:bg-gray-600
|
|
63
|
+
[&:after]:rounded-[50%] [&:after]:leading-5
|
|
64
|
+
'
|
|
65
|
+
data-testid={testIds.dot}
|
|
66
|
+
/>
|
|
61
67
|
)}
|
|
62
68
|
{hasConnector && (
|
|
63
69
|
<div
|
|
64
|
-
className=
|
|
70
|
+
className='flex-1 w-0 border-dashed border-0 border-l border-gray-600'
|
|
65
71
|
data-testid={testIds.connector}
|
|
66
72
|
/>
|
|
67
73
|
)}
|
|
@@ -70,10 +76,10 @@ const TimelineRow = ({
|
|
|
70
76
|
|
|
71
77
|
{date && (
|
|
72
78
|
<Container
|
|
73
|
-
className={
|
|
79
|
+
className={tableCellClasses}
|
|
74
80
|
style={{ whiteSpace: 'nowrap' }}
|
|
75
81
|
>
|
|
76
|
-
<Container className=
|
|
82
|
+
<Container className='flex-[0_0_auto]' right='large'>
|
|
77
83
|
<Typography className='leading-6' weight='semibold' size='medium'>
|
|
78
84
|
{date}
|
|
79
85
|
</Typography>
|
|
@@ -81,8 +87,8 @@ const TimelineRow = ({
|
|
|
81
87
|
</Container>
|
|
82
88
|
)}
|
|
83
89
|
|
|
84
|
-
<Container className={
|
|
85
|
-
<Container className=
|
|
90
|
+
<Container className={tableCellClasses}>
|
|
91
|
+
<Container className='grow group-last:mb-0' bottom='large'>
|
|
86
92
|
{children}
|
|
87
93
|
</Container>
|
|
88
94
|
</Container>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Timeline/styles.ts"],"names":[],"mappings":";AAEA,wBAOI"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Timeline/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,aAAa;QACrB,KAAK,EAAE,aAAa;KACrB;CACF,CAAC,CAAA"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "dot" | "icon" | "date" | "connector" | "tableRow" | "tableCell" | "tableCellContent">;
|
|
3
|
-
export default _default;
|
|
4
|
-
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TimelineRow/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAqDI"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
-
export default ({ palette }) => createStyles({
|
|
3
|
-
root: {
|
|
4
|
-
// No bottom spacing for the last Container
|
|
5
|
-
'&:last-child $content': {
|
|
6
|
-
marginBottom: 0,
|
|
7
|
-
},
|
|
8
|
-
},
|
|
9
|
-
content: {
|
|
10
|
-
flexGrow: 1,
|
|
11
|
-
},
|
|
12
|
-
icon: {
|
|
13
|
-
margin: '4px 0',
|
|
14
|
-
color: palette.grey.main2,
|
|
15
|
-
},
|
|
16
|
-
dot: {
|
|
17
|
-
// Outer dot icon dimensions should match picasso 16px icons
|
|
18
|
-
width: '16px',
|
|
19
|
-
height: '16px',
|
|
20
|
-
display: 'flex',
|
|
21
|
-
alignItems: 'center',
|
|
22
|
-
justifyContent: 'center',
|
|
23
|
-
background: 'white',
|
|
24
|
-
margin: '4px 0',
|
|
25
|
-
'&:after': {
|
|
26
|
-
content: '""',
|
|
27
|
-
width: '9px',
|
|
28
|
-
height: '9px',
|
|
29
|
-
background: palette.grey.main2,
|
|
30
|
-
borderRadius: '50%',
|
|
31
|
-
lineHeight: '20px',
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
date: {
|
|
35
|
-
flex: '0 0 auto',
|
|
36
|
-
},
|
|
37
|
-
connector: {
|
|
38
|
-
flex: 1,
|
|
39
|
-
width: 0,
|
|
40
|
-
borderLeft: `1px dashed ${palette.grey.main2}`,
|
|
41
|
-
},
|
|
42
|
-
tableRow: {
|
|
43
|
-
display: 'table-row',
|
|
44
|
-
},
|
|
45
|
-
tableCell: {
|
|
46
|
-
display: 'table-cell',
|
|
47
|
-
verticalAlign: 'top',
|
|
48
|
-
height: '100%',
|
|
49
|
-
},
|
|
50
|
-
tableCellContent: {
|
|
51
|
-
height: '100%',
|
|
52
|
-
},
|
|
53
|
-
});
|
|
54
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TimelineRow/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,2CAA2C;QAC3C,uBAAuB,EAAE;YACvB,YAAY,EAAE,CAAC;SAChB;KACF;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,CAAC;KACZ;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;KAC1B;IACD,GAAG,EAAE;QACH,4DAA4D;QAC5D,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,OAAO;QACnB,MAAM,EAAE,OAAO;QAEf,SAAS,EAAE;YACT,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;YAC9B,YAAY,EAAE,KAAK;YACnB,UAAU,EAAE,MAAM;SACnB;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,UAAU,EAAE,cAAc,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/C;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,WAAW;KACrB;IACD,SAAS,EAAE;QACT,OAAO,EAAE,YAAY;QACrB,aAAa,EAAE,KAAK;QACpB,MAAM,EAAE,MAAM;KACf;IACD,gBAAgB,EAAE;QAChB,MAAM,EAAE,MAAM;KACf;CACF,CAAC,CAAA"}
|
package/src/Timeline/styles.ts
DELETED
|
@@ -1,57 +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
|
-
root: {
|
|
7
|
-
// No bottom spacing for the last Container
|
|
8
|
-
'&:last-child $content': {
|
|
9
|
-
marginBottom: 0,
|
|
10
|
-
},
|
|
11
|
-
},
|
|
12
|
-
content: {
|
|
13
|
-
flexGrow: 1,
|
|
14
|
-
},
|
|
15
|
-
icon: {
|
|
16
|
-
margin: '4px 0',
|
|
17
|
-
color: palette.grey.main2,
|
|
18
|
-
},
|
|
19
|
-
dot: {
|
|
20
|
-
// Outer dot icon dimensions should match picasso 16px icons
|
|
21
|
-
width: '16px',
|
|
22
|
-
height: '16px',
|
|
23
|
-
display: 'flex',
|
|
24
|
-
alignItems: 'center',
|
|
25
|
-
justifyContent: 'center',
|
|
26
|
-
background: 'white',
|
|
27
|
-
margin: '4px 0',
|
|
28
|
-
|
|
29
|
-
'&:after': {
|
|
30
|
-
content: '""',
|
|
31
|
-
width: '9px',
|
|
32
|
-
height: '9px',
|
|
33
|
-
background: palette.grey.main2,
|
|
34
|
-
borderRadius: '50%',
|
|
35
|
-
lineHeight: '20px',
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
date: {
|
|
39
|
-
flex: '0 0 auto',
|
|
40
|
-
},
|
|
41
|
-
connector: {
|
|
42
|
-
flex: 1,
|
|
43
|
-
width: 0,
|
|
44
|
-
borderLeft: `1px dashed ${palette.grey.main2}`,
|
|
45
|
-
},
|
|
46
|
-
tableRow: {
|
|
47
|
-
display: 'table-row',
|
|
48
|
-
},
|
|
49
|
-
tableCell: {
|
|
50
|
-
display: 'table-cell',
|
|
51
|
-
verticalAlign: 'top',
|
|
52
|
-
height: '100%',
|
|
53
|
-
},
|
|
54
|
-
tableCellContent: {
|
|
55
|
-
height: '100%',
|
|
56
|
-
},
|
|
57
|
-
})
|