@micromag/screen-title 0.3.832 → 0.4.4
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/assets/css/styles.css +1 -1
- package/es/index.d.ts +150 -0
- package/es/index.js +49 -86
- package/es/styles.css +1 -0
- package/package.json +20 -19
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.container{height:100%;overflow:hidden;position:relative;width:100%}.container .background{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.container .content{z-index:1}.container .emptyDescription,.container .emptySubtitle,.container .emptyTitle{border:2px dashed var(--mm-gray-800);color:var(--mm-gray-800);margin:10px auto;width:100%}.container .emptyTitle{height:100px}.container .emptyDescription,.container .emptySubtitle{height:50px}.container .subtitle.withMargin,.container .title.withMargin{margin-bottom:.2em}.container .box{padding:.5em}.container.isPlaceholder .layout{padding:10px}.container.isPlaceholder .box{border:2px solid hsla(0,0%,100%,.5);mix-blend-mode:difference}
|
package/es/index.d.ts
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { HeadingElement, TextElement, BoxStyle, Label, Header, Footer, BackgroundElement } from '@micromag/core';
|
|
3
|
+
|
|
4
|
+
declare function TitleWithBoxScreen(props: any): react_jsx_runtime.JSX.Element;
|
|
5
|
+
|
|
6
|
+
declare const _default: {
|
|
7
|
+
id: string;
|
|
8
|
+
type: string;
|
|
9
|
+
group: {
|
|
10
|
+
label: {
|
|
11
|
+
defaultMessage: string;
|
|
12
|
+
description: string;
|
|
13
|
+
};
|
|
14
|
+
order: number;
|
|
15
|
+
};
|
|
16
|
+
title: {
|
|
17
|
+
defaultMessage: string;
|
|
18
|
+
description: string;
|
|
19
|
+
};
|
|
20
|
+
component: typeof TitleWithBoxScreen;
|
|
21
|
+
layouts: string[];
|
|
22
|
+
fields: ({
|
|
23
|
+
name: string;
|
|
24
|
+
type: string;
|
|
25
|
+
defaultValue: string;
|
|
26
|
+
label: {
|
|
27
|
+
defaultMessage: string;
|
|
28
|
+
description: string;
|
|
29
|
+
};
|
|
30
|
+
theme?: undefined;
|
|
31
|
+
isList?: undefined;
|
|
32
|
+
fields?: undefined;
|
|
33
|
+
} | {
|
|
34
|
+
name: string;
|
|
35
|
+
type: string;
|
|
36
|
+
theme: {
|
|
37
|
+
textStyle: string;
|
|
38
|
+
badge?: undefined;
|
|
39
|
+
callToAction?: undefined;
|
|
40
|
+
};
|
|
41
|
+
label: {
|
|
42
|
+
defaultMessage: string;
|
|
43
|
+
description: string;
|
|
44
|
+
};
|
|
45
|
+
defaultValue?: undefined;
|
|
46
|
+
isList?: undefined;
|
|
47
|
+
fields?: undefined;
|
|
48
|
+
} | {
|
|
49
|
+
type: string;
|
|
50
|
+
isList: boolean;
|
|
51
|
+
label: {
|
|
52
|
+
defaultMessage: string;
|
|
53
|
+
description: string;
|
|
54
|
+
};
|
|
55
|
+
fields: {
|
|
56
|
+
name: string;
|
|
57
|
+
type: string;
|
|
58
|
+
label: {
|
|
59
|
+
defaultMessage: string;
|
|
60
|
+
description: string;
|
|
61
|
+
};
|
|
62
|
+
}[];
|
|
63
|
+
name?: undefined;
|
|
64
|
+
defaultValue?: undefined;
|
|
65
|
+
theme?: undefined;
|
|
66
|
+
} | {
|
|
67
|
+
name: string;
|
|
68
|
+
type: string;
|
|
69
|
+
label: {
|
|
70
|
+
defaultMessage: string;
|
|
71
|
+
description: string;
|
|
72
|
+
};
|
|
73
|
+
defaultValue?: undefined;
|
|
74
|
+
theme?: undefined;
|
|
75
|
+
isList?: undefined;
|
|
76
|
+
fields?: undefined;
|
|
77
|
+
} | {
|
|
78
|
+
name: string;
|
|
79
|
+
type: string;
|
|
80
|
+
label: {
|
|
81
|
+
defaultMessage: string;
|
|
82
|
+
description: string;
|
|
83
|
+
};
|
|
84
|
+
theme: {
|
|
85
|
+
badge: {
|
|
86
|
+
label: {
|
|
87
|
+
textStyle: string;
|
|
88
|
+
};
|
|
89
|
+
boxStyle: string;
|
|
90
|
+
};
|
|
91
|
+
textStyle?: undefined;
|
|
92
|
+
callToAction?: undefined;
|
|
93
|
+
};
|
|
94
|
+
defaultValue?: undefined;
|
|
95
|
+
isList?: undefined;
|
|
96
|
+
fields?: undefined;
|
|
97
|
+
} | {
|
|
98
|
+
name: string;
|
|
99
|
+
type: string;
|
|
100
|
+
label: {
|
|
101
|
+
defaultMessage: string;
|
|
102
|
+
description: string;
|
|
103
|
+
};
|
|
104
|
+
theme: {
|
|
105
|
+
callToAction: {
|
|
106
|
+
label: {
|
|
107
|
+
textStyle: string;
|
|
108
|
+
};
|
|
109
|
+
boxStyle: string;
|
|
110
|
+
};
|
|
111
|
+
textStyle?: undefined;
|
|
112
|
+
badge?: undefined;
|
|
113
|
+
};
|
|
114
|
+
defaultValue?: undefined;
|
|
115
|
+
isList?: undefined;
|
|
116
|
+
fields?: undefined;
|
|
117
|
+
})[];
|
|
118
|
+
}[];
|
|
119
|
+
|
|
120
|
+
interface TitleScreenProps {
|
|
121
|
+
layout?: 'top' | 'middle' | 'bottom' | 'split' | 'split-top' | 'split-bottom';
|
|
122
|
+
title?: HeadingElement | null;
|
|
123
|
+
subtitle?: HeadingElement | null;
|
|
124
|
+
description?: TextElement | null;
|
|
125
|
+
boxStyle?: BoxStyle | null;
|
|
126
|
+
withSubtitle?: boolean;
|
|
127
|
+
withDescription?: boolean;
|
|
128
|
+
withBox?: boolean;
|
|
129
|
+
spacing?: number;
|
|
130
|
+
descriptionEmptyLabel?: Label;
|
|
131
|
+
header?: Header | null;
|
|
132
|
+
footer?: Footer | null;
|
|
133
|
+
background?: BackgroundElement | null;
|
|
134
|
+
current?: boolean;
|
|
135
|
+
active?: boolean;
|
|
136
|
+
transitionStagger?: number;
|
|
137
|
+
className?: string | null;
|
|
138
|
+
}
|
|
139
|
+
declare function TitleScreen({ layout, title, subtitle, description, boxStyle, withSubtitle, withDescription, withBox, spacing, descriptionEmptyLabel, header, footer, background, current, active, className, }: TitleScreenProps): react_jsx_runtime.JSX.Element;
|
|
140
|
+
|
|
141
|
+
declare function TitleSubtitleScreen({ ...props }: {
|
|
142
|
+
[x: string]: any;
|
|
143
|
+
}): react_jsx_runtime.JSX.Element;
|
|
144
|
+
|
|
145
|
+
interface TitleSubtitleCreditsScreenProps {
|
|
146
|
+
credits?: TextElement | null;
|
|
147
|
+
}
|
|
148
|
+
declare function TitleSubtitleCreditsScreen({ credits, ...props }: TitleSubtitleCreditsScreenProps): react_jsx_runtime.JSX.Element;
|
|
149
|
+
|
|
150
|
+
export { TitleScreen, TitleSubtitleCreditsScreen, TitleSubtitleScreen, _default as default };
|
package/es/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { FormattedMessage, defineMessage } from 'react-intl';
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
4
|
import React from 'react';
|
|
6
|
-
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
7
5
|
import { ScreenElement } from '@micromag/core/components';
|
|
8
6
|
import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
|
|
9
7
|
import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromBox } from '@micromag/core/utils';
|
|
@@ -18,69 +16,47 @@ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructurin
|
|
|
18
16
|
import _extends from '@babel/runtime/helpers/extends';
|
|
19
17
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
20
18
|
|
|
21
|
-
var styles = {"container":"
|
|
19
|
+
var styles = {"container":"container","background":"background","content":"content","emptyTitle":"emptyTitle","emptySubtitle":"emptySubtitle","emptyDescription":"emptyDescription","title":"title","withMargin":"withMargin","subtitle":"subtitle","box":"box","isPlaceholder":"isPlaceholder","layout":"layout"};
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
layout
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
current: true,
|
|
63
|
-
active: true,
|
|
64
|
-
transitionStagger: 100,
|
|
65
|
-
className: null
|
|
66
|
-
};
|
|
67
|
-
var TitleScreen = function TitleScreen(_ref) {
|
|
68
|
-
var layout = _ref.layout,
|
|
69
|
-
title = _ref.title,
|
|
70
|
-
subtitle = _ref.subtitle,
|
|
71
|
-
description = _ref.description,
|
|
72
|
-
boxStyle = _ref.boxStyle,
|
|
73
|
-
withSubtitle = _ref.withSubtitle,
|
|
74
|
-
withDescription = _ref.withDescription,
|
|
75
|
-
withBox = _ref.withBox,
|
|
76
|
-
spacing = _ref.spacing,
|
|
77
|
-
descriptionEmptyLabel = _ref.descriptionEmptyLabel,
|
|
78
|
-
header = _ref.header,
|
|
79
|
-
footer = _ref.footer,
|
|
80
|
-
background = _ref.background,
|
|
81
|
-
current = _ref.current,
|
|
82
|
-
active = _ref.active,
|
|
83
|
-
className = _ref.className;
|
|
21
|
+
function TitleScreen(_ref) {
|
|
22
|
+
var _ref$layout = _ref.layout,
|
|
23
|
+
layout = _ref$layout === void 0 ? 'top' : _ref$layout,
|
|
24
|
+
_ref$title = _ref.title,
|
|
25
|
+
title = _ref$title === void 0 ? null : _ref$title,
|
|
26
|
+
_ref$subtitle = _ref.subtitle,
|
|
27
|
+
subtitle = _ref$subtitle === void 0 ? null : _ref$subtitle,
|
|
28
|
+
_ref$description = _ref.description,
|
|
29
|
+
description = _ref$description === void 0 ? null : _ref$description,
|
|
30
|
+
_ref$boxStyle = _ref.boxStyle,
|
|
31
|
+
boxStyle = _ref$boxStyle === void 0 ? null : _ref$boxStyle,
|
|
32
|
+
_ref$withSubtitle = _ref.withSubtitle,
|
|
33
|
+
withSubtitle = _ref$withSubtitle === void 0 ? false : _ref$withSubtitle,
|
|
34
|
+
_ref$withDescription = _ref.withDescription,
|
|
35
|
+
withDescription = _ref$withDescription === void 0 ? false : _ref$withDescription,
|
|
36
|
+
_ref$withBox = _ref.withBox,
|
|
37
|
+
withBox = _ref$withBox === void 0 ? false : _ref$withBox,
|
|
38
|
+
_ref$spacing = _ref.spacing,
|
|
39
|
+
spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
|
|
40
|
+
_ref$descriptionEmpty = _ref.descriptionEmptyLabel,
|
|
41
|
+
descriptionEmptyLabel = _ref$descriptionEmpty === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
42
|
+
id: "507VAi",
|
|
43
|
+
defaultMessage: [{
|
|
44
|
+
"type": 0,
|
|
45
|
+
"value": "Description"
|
|
46
|
+
}]
|
|
47
|
+
}) : _ref$descriptionEmpty,
|
|
48
|
+
_ref$header = _ref.header,
|
|
49
|
+
header = _ref$header === void 0 ? null : _ref$header,
|
|
50
|
+
_ref$footer = _ref.footer,
|
|
51
|
+
footer = _ref$footer === void 0 ? null : _ref$footer,
|
|
52
|
+
_ref$background = _ref.background,
|
|
53
|
+
background = _ref$background === void 0 ? null : _ref$background,
|
|
54
|
+
_ref$current = _ref.current,
|
|
55
|
+
current = _ref$current === void 0 ? true : _ref$current,
|
|
56
|
+
_ref$active = _ref.active,
|
|
57
|
+
active = _ref$active === void 0 ? true : _ref$active,
|
|
58
|
+
_ref$className = _ref.className,
|
|
59
|
+
className = _ref$className === void 0 ? null : _ref$className;
|
|
84
60
|
var _useScreenSize = useScreenSize(),
|
|
85
61
|
width = _useScreenSize.width,
|
|
86
62
|
height = _useScreenSize.height,
|
|
@@ -230,26 +206,19 @@ var TitleScreen = function TitleScreen(_ref) {
|
|
|
230
206
|
withoutVideo: isPreview,
|
|
231
207
|
className: styles.background
|
|
232
208
|
}) : null);
|
|
233
|
-
}
|
|
234
|
-
TitleScreen.propTypes = propTypes$2;
|
|
235
|
-
TitleScreen.defaultProps = defaultProps$2;
|
|
209
|
+
}
|
|
236
210
|
|
|
237
|
-
|
|
211
|
+
function TitleSubtitleScreen(_ref) {
|
|
238
212
|
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
239
213
|
return /*#__PURE__*/React.createElement(TitleScreen, Object.assign({}, props, {
|
|
240
214
|
withSubtitle: true
|
|
241
215
|
}));
|
|
242
|
-
}
|
|
216
|
+
}
|
|
243
217
|
|
|
244
218
|
var _excluded = ["credits"];
|
|
245
|
-
|
|
246
|
-
credits
|
|
247
|
-
|
|
248
|
-
var defaultProps$1 = {
|
|
249
|
-
credits: null
|
|
250
|
-
};
|
|
251
|
-
var TitleSubtitleCreditsScreen = function TitleSubtitleCreditsScreen(_ref) {
|
|
252
|
-
var credits = _ref.credits,
|
|
219
|
+
function TitleSubtitleCreditsScreen(_ref) {
|
|
220
|
+
var _ref$credits = _ref.credits,
|
|
221
|
+
credits = _ref$credits === void 0 ? null : _ref$credits,
|
|
253
222
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
254
223
|
return /*#__PURE__*/React.createElement(TitleScreen, Object.assign({}, props, {
|
|
255
224
|
description: credits,
|
|
@@ -263,22 +232,16 @@ var TitleSubtitleCreditsScreen = function TitleSubtitleCreditsScreen(_ref) {
|
|
|
263
232
|
}]
|
|
264
233
|
})
|
|
265
234
|
}));
|
|
266
|
-
}
|
|
267
|
-
TitleSubtitleCreditsScreen.propTypes = propTypes$1;
|
|
268
|
-
TitleSubtitleCreditsScreen.defaultProps = defaultProps$1;
|
|
235
|
+
}
|
|
269
236
|
|
|
270
237
|
/* eslint-disable react/jsx-props-no-spreading */
|
|
271
|
-
|
|
272
|
-
var defaultProps = {};
|
|
273
|
-
var TitleWithBoxScreen = function TitleWithBoxScreen(props) {
|
|
238
|
+
function TitleWithBoxScreen(props) {
|
|
274
239
|
return /*#__PURE__*/React.createElement(TitleScreen, Object.assign({}, props, {
|
|
275
240
|
withSubtitle: true,
|
|
276
241
|
withDescription: true,
|
|
277
242
|
withBox: true
|
|
278
243
|
}));
|
|
279
|
-
}
|
|
280
|
-
TitleWithBoxScreen.propTypes = propTypes;
|
|
281
|
-
TitleWithBoxScreen.defaultProps = defaultProps;
|
|
244
|
+
}
|
|
282
245
|
|
|
283
246
|
var definition = [{
|
|
284
247
|
id: 'title',
|
package/es/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.container{height:100%;overflow:hidden;position:relative;width:100%}.container .background{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.container .content{z-index:1}.container .emptyDescription,.container .emptySubtitle,.container .emptyTitle{border:2px dashed var(--mm-gray-800);color:var(--mm-gray-800);margin:10px auto;width:100%}.container .emptyTitle{height:100px}.container .emptyDescription,.container .emptySubtitle{height:50px}.container .subtitle.withMargin,.container .title.withMargin{margin-bottom:.2em}.container .box{padding:.5em}.container.isPlaceholder .layout{padding:10px}.container.isPlaceholder .box{border:2px solid hsla(0,0%,100%,.5);mix-blend-mode:difference}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-title",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"style": "assets/css/styles.css",
|
|
36
36
|
"exports": {
|
|
37
37
|
".": {
|
|
38
|
+
"types": "./es/index.d.ts",
|
|
38
39
|
"import": "./es/index.js"
|
|
39
40
|
},
|
|
40
41
|
"./assets/css/styles": "./assets/css/styles.css",
|
|
@@ -48,36 +49,36 @@
|
|
|
48
49
|
"scripts": {
|
|
49
50
|
"clean": "rm -rf es && rm -rf lib && rm -rf assets",
|
|
50
51
|
"prepublishOnly": "npm run build",
|
|
51
|
-
"build": "../../scripts/prepare-package.sh"
|
|
52
|
+
"build": "../../scripts/prepare-package.sh --types"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
54
|
-
"react": "^
|
|
55
|
-
"react-dom": "^
|
|
55
|
+
"react": "^19.2.0",
|
|
56
|
+
"react-dom": "^18.3.0 || ^19.0.0"
|
|
56
57
|
},
|
|
57
58
|
"peerDependencies": {
|
|
58
|
-
"react": "^
|
|
59
|
-
"react-dom": "^
|
|
59
|
+
"react": "^19.2.0",
|
|
60
|
+
"react-dom": "^18.3.0 || ^19.0.0"
|
|
60
61
|
},
|
|
61
62
|
"dependencies": {
|
|
62
63
|
"@babel/runtime": "^7.13.10",
|
|
63
|
-
"@micromag/core": "^0.
|
|
64
|
-
"@micromag/element-background": "^0.
|
|
65
|
-
"@micromag/element-container": "^0.
|
|
66
|
-
"@micromag/element-footer": "^0.
|
|
67
|
-
"@micromag/element-header": "^0.
|
|
68
|
-
"@micromag/element-heading": "^0.
|
|
69
|
-
"@micromag/element-layout": "^0.
|
|
70
|
-
"@micromag/element-text": "^0.
|
|
71
|
-
"@micromag/transforms": "^0.
|
|
64
|
+
"@micromag/core": "^0.4.4",
|
|
65
|
+
"@micromag/element-background": "^0.4.4",
|
|
66
|
+
"@micromag/element-container": "^0.4.4",
|
|
67
|
+
"@micromag/element-footer": "^0.4.4",
|
|
68
|
+
"@micromag/element-header": "^0.4.4",
|
|
69
|
+
"@micromag/element-heading": "^0.4.4",
|
|
70
|
+
"@micromag/element-layout": "^0.4.4",
|
|
71
|
+
"@micromag/element-text": "^0.4.4",
|
|
72
|
+
"@micromag/transforms": "^0.4.4",
|
|
72
73
|
"classnames": "^2.2.6",
|
|
73
|
-
"lodash": "^4.17.
|
|
74
|
-
"
|
|
75
|
-
"react-intl": "^6.6.4",
|
|
74
|
+
"lodash": "^4.17.23",
|
|
75
|
+
"react-intl": "^8.1.3",
|
|
76
76
|
"uuid": "^9.0.0"
|
|
77
77
|
},
|
|
78
78
|
"publishConfig": {
|
|
79
79
|
"access": "public",
|
|
80
80
|
"registry": "https://registry.npmjs.org/"
|
|
81
81
|
},
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d",
|
|
83
|
+
"types": "es/index.d.ts"
|
|
83
84
|
}
|