@micromag/screen-contribution 0.3.349 → 0.3.356

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.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +54 -34
  3. package/lib/index.js +55 -34
  4. package/package.json +15 -14
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-contribution-container .micromag-screen-contribution-background,.micromag-screen-contribution-container .micromag-screen-contribution-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-contribution-container{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-background{z-index:0}.micromag-screen-contribution-container .micromag-screen-contribution-content{z-index:1}@-webkit-keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputName,.micromag-screen-contribution-container .micromag-screen-contribution-emptySubmit,.micromag-screen-contribution-container .micromag-screen-contribution-emptyTitle{margin-bottom:10px;padding:10px}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-title{padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-interactiveContainer{-webkit-transition-property:height;-o-transition-property:height;transition-property:height;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-form{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit,.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{display:block;padding:4px;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{margin-bottom:10px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit{border:0}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:disabled{opacity:1}.micromag-screen-contribution-container .micromag-screen-contribution-formContent{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading{-webkit-animation:micromag-screen-contribution-rotate 1s linear infinite;animation:micromag-screen-contribution-rotate 1s linear infinite;height:40px;left:50%;margin-left:-20px;margin-top:-20px;opacity:0;pointer-events:none;position:absolute;top:50%;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;width:40px}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading .micromag-screen-contribution-loadingIcon{display:block;height:100%;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContainer{opacity:0;position:relative;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContent{height:0;overflow:hidden;position:absolute;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributions{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-contribution{border-bottom:1px solid #fff;margin-bottom:20px;padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:first-child{border-top:1px solid #fff;padding-top:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.micromag-screen-contribution-container .micromag-screen-contribution-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-callToAction.micromag-screen-contribution-disabled{opacity:0;pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-form{pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formContent{opacity:.4}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formLoading{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-submitted .micromag-screen-contribution-formContent{opacity:0}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-form{display:none}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContainer{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContent{height:auto;overflow:visible;position:relative}.micromag-screen-contribution-container.micromag-screen-contribution-isPlaceholder .micromag-screen-contribution-inner{padding:10px}
1
+ .micromag-screen-contribution-container .micromag-screen-contribution-background,.micromag-screen-contribution-container .micromag-screen-contribution-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-contribution-container{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-background{z-index:0}.micromag-screen-contribution-container .micromag-screen-contribution-content{z-index:1}.micromag-screen-contribution-container .micromag-screen-contribution-header{left:0;position:relative;top:0;width:100%}@-webkit-keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-screen-contribution-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputName,.micromag-screen-contribution-container .micromag-screen-contribution-emptySubmit,.micromag-screen-contribution-container .micromag-screen-contribution-emptyTitle{margin-bottom:10px;padding:10px}.micromag-screen-contribution-container .micromag-screen-contribution-emptyInputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-title{padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-interactiveContainer{-webkit-transition-property:height;-o-transition-property:height;transition-property:height;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-form{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit,.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{display:block;padding:4px;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage,.micromag-screen-contribution-container .micromag-screen-contribution-inputName{margin-bottom:10px}.micromag-screen-contribution-container .micromag-screen-contribution-inputMessage{height:100px}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit{border:0}.micromag-screen-contribution-container .micromag-screen-contribution-buttonSubmit:disabled{opacity:1}.micromag-screen-contribution-container .micromag-screen-contribution-formContent{-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading{-webkit-animation:micromag-screen-contribution-rotate 1s linear infinite;animation:micromag-screen-contribution-rotate 1s linear infinite;height:40px;left:50%;margin-left:-20px;margin-top:-20px;opacity:0;pointer-events:none;position:absolute;top:50%;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;width:40px}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading .micromag-screen-contribution-loadingIcon{display:block;height:100%;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContainer{opacity:0;position:relative;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContent{height:0;overflow:hidden;position:absolute;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributions{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-contribution{border-bottom:1px solid #fff;margin-bottom:20px;padding-bottom:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:first-child{border-top:1px solid #fff;padding-top:20px}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}.micromag-screen-contribution-container .micromag-screen-contribution-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-contribution-container .micromag-screen-contribution-footer.micromag-screen-contribution-disabled{opacity:0;pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-form{pointer-events:none}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formContent{opacity:.4}.micromag-screen-contribution-container.micromag-screen-contribution-submitting .micromag-screen-contribution-formLoading{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-submitted .micromag-screen-contribution-formContent{opacity:0}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-form{display:none}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContainer{opacity:1}.micromag-screen-contribution-container.micromag-screen-contribution-showContributions .micromag-screen-contribution-contributionsContent{height:auto;overflow:visible;position:relative}.micromag-screen-contribution-container.micromag-screen-contribution-isPlaceholder .micromag-screen-contribution-inner{padding:10px}
package/es/index.js CHANGED
@@ -11,18 +11,19 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
11
11
  import { ScreenElement, Transitions } from '@micromag/core/components';
12
12
  import { useScreenSize, useViewerContext, useScreenRenderContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
13
13
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
14
- import { isTextFilled, isLabelFilled, getStyleFromColor } from '@micromag/core/utils';
14
+ import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, isLabelFilled, getStyleFromColor } from '@micromag/core/utils';
15
15
  import { useContributionCreate, useContributions } from '@micromag/data';
16
16
  import Background from '@micromag/element-background';
17
17
  import Button from '@micromag/element-button';
18
- import CallToAction from '@micromag/element-call-to-action';
19
18
  import Container from '@micromag/element-container';
19
+ import Footer from '@micromag/element-footer';
20
+ import Header from '@micromag/element-header';
20
21
  import Heading from '@micromag/element-heading';
21
22
  import Scroll from '@micromag/element-scroll';
22
23
  import Text from '@micromag/element-text';
23
24
  import TextInput from '@micromag/element-text-input';
24
25
 
25
- var styles = {"container":"micromag-screen-contribution-container","inner":"micromag-screen-contribution-inner","background":"micromag-screen-contribution-background","buttonSubmit":"micromag-screen-contribution-buttonSubmit","content":"micromag-screen-contribution-content","emptyTitle":"micromag-screen-contribution-emptyTitle","emptyInputName":"micromag-screen-contribution-emptyInputName","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptySubmit":"micromag-screen-contribution-emptySubmit","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputName":"micromag-screen-contribution-inputName","inputMessage":"micromag-screen-contribution-inputMessage","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","callToAction":"micromag-screen-contribution-callToAction","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
26
+ var styles = {"container":"micromag-screen-contribution-container","inner":"micromag-screen-contribution-inner","background":"micromag-screen-contribution-background","buttonSubmit":"micromag-screen-contribution-buttonSubmit","content":"micromag-screen-contribution-content","header":"micromag-screen-contribution-header","emptyTitle":"micromag-screen-contribution-emptyTitle","emptyInputName":"micromag-screen-contribution-emptyInputName","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptySubmit":"micromag-screen-contribution-emptySubmit","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputName":"micromag-screen-contribution-inputName","inputMessage":"micromag-screen-contribution-inputMessage","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","footer":"micromag-screen-contribution-footer","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
26
27
 
27
28
  var propTypes = {
28
29
  id: PropTypes.string,
@@ -35,7 +36,8 @@ var propTypes = {
35
36
  messageStyle: PropTypes$1.textStyle,
36
37
  spacing: PropTypes.number,
37
38
  background: PropTypes$1.backgroundElement,
38
- callToAction: PropTypes$1.callToAction,
39
+ header: PropTypes$1.header,
40
+ footer: PropTypes$1.footer,
39
41
  current: PropTypes.bool,
40
42
  active: PropTypes.bool,
41
43
  transitions: PropTypes$1.transitions,
@@ -55,7 +57,8 @@ var defaultProps = {
55
57
  messageStyle: null,
56
58
  spacing: 20,
57
59
  background: null,
58
- callToAction: null,
60
+ header: null,
61
+ footer: null,
59
62
  current: true,
60
63
  active: true,
61
64
  transitions: null,
@@ -65,7 +68,7 @@ var defaultProps = {
65
68
  className: null
66
69
  };
67
70
  var ContributionScreen = function ContributionScreen(_ref) {
68
- var _ref4;
71
+ var _ref3;
69
72
  var id = _ref.id,
70
73
  layout = _ref.layout,
71
74
  title = _ref.title,
@@ -76,7 +79,8 @@ var ContributionScreen = function ContributionScreen(_ref) {
76
79
  messageStyle = _ref.messageStyle,
77
80
  spacing = _ref.spacing,
78
81
  background = _ref.background,
79
- callToAction = _ref.callToAction,
82
+ header = _ref.header,
83
+ footer = _ref.footer,
80
84
  current = _ref.current,
81
85
  active = _ref.active,
82
86
  transitions = _ref.transitions,
@@ -111,9 +115,14 @@ var ContributionScreen = function ContributionScreen(_ref) {
111
115
  var transitionPlaying = current;
112
116
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
113
117
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
114
- var _ref2 = callToAction || {},
115
- _ref2$active = _ref2.active,
116
- hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
118
+ var hasHeader = isHeaderFilled(header);
119
+ var hasFooter = isFooterFilled(footer);
120
+ var footerProps = getFooterProps(footer, {
121
+ isView: isView,
122
+ current: current,
123
+ openWebView: openWebView,
124
+ isPreview: isPreview
125
+ });
117
126
  var hasTitle = isTextFilled(title);
118
127
  var hasNameLabel = isLabelFilled(name);
119
128
  var hasMessageLabel = isLabelFilled(message);
@@ -187,11 +196,11 @@ var ContributionScreen = function ContributionScreen(_ref) {
187
196
  setScrolledBottom = _useState10[1];
188
197
  var swipeUpLinkActive = scrolledBottom && submitState === 4;
189
198
  var _useDimensionObserver = useDimensionObserver(),
190
- callToActionRef = _useDimensionObserver.ref,
199
+ footerRef = _useDimensionObserver.ref,
191
200
  _useDimensionObserver2 = _useDimensionObserver.height,
192
201
  callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
193
- var onScrolledBottom = useCallback(function (_ref3) {
194
- var initial = _ref3.initial;
202
+ var onScrolledBottom = useCallback(function (_ref2) {
203
+ var initial = _ref2.initial;
195
204
  if (initial) {
196
205
  trackScreenEvent('scroll', 'Contributions list');
197
206
  }
@@ -393,13 +402,20 @@ var ContributionScreen = function ContributionScreen(_ref) {
393
402
  body: contribution.message,
394
403
  textStyle: messageInnerStyle
395
404
  }));
396
- })))), hasCallToAction ? /*#__PURE__*/React.createElement("div", {
405
+ })))), hasFooter ? /*#__PURE__*/React.createElement("div", {
397
406
  style: {
398
407
  height: callToActionHeight
399
408
  }
400
409
  }) : null));
410
+ var headerElement = !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
411
+ className: styles.header,
412
+ style: {
413
+ paddingBottom: spacing
414
+ }
415
+ }, /*#__PURE__*/React.createElement(Header, header)) : null;
416
+ var headerInScroll = submitState >= 4;
401
417
  return /*#__PURE__*/React.createElement("div", {
402
- className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref4, styles.submitting, submitState === 1), _defineProperty(_ref4, styles.submitted, submitState > 1), _defineProperty(_ref4, styles.showContributions, submitState === 4), _ref4)]),
418
+ className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles.submitting, submitState === 1), _defineProperty(_ref3, styles.submitted, submitState > 1), _defineProperty(_ref3, styles.showContributions, submitState === 4), _ref3)]),
403
419
  "data-screen-ready": true
404
420
  }, /*#__PURE__*/React.createElement(Container, {
405
421
  width: width,
@@ -413,25 +429,21 @@ var ContributionScreen = function ContributionScreen(_ref) {
413
429
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
414
430
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
415
431
  } : null
416
- }, /*#__PURE__*/React.createElement(Scroll, {
432
+ }, !headerInScroll ? headerElement : null, /*#__PURE__*/React.createElement(Scroll, {
417
433
  verticalAlign: layout,
418
434
  disabled: scrollingDisabled,
419
435
  onScrolledBottom: onScrolledBottom,
420
436
  onScrolledNotBottom: onScrolledNotBottom
421
- }, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
422
- ref: callToActionRef,
423
- className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !swipeUpLinkActive)]),
437
+ }, headerInScroll ? headerElement : null, items), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
438
+ ref: footerRef,
439
+ className: classNames([styles.footer, _defineProperty({}, styles.disabled, !swipeUpLinkActive)]),
424
440
  style: {
425
441
  paddingLeft: Math.max(viewerBottomSidesWidth, spacing / 2),
426
442
  paddingRight: Math.max(viewerBottomSidesWidth, spacing / 2),
427
443
  paddingTop: 0,
428
444
  paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing / 2
429
445
  }
430
- }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
431
- animationDisabled: isPreview,
432
- focusable: current && isView,
433
- openWebView: openWebView
434
- }))) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
446
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
435
447
  background: background,
436
448
  width: width,
437
449
  height: height,
@@ -573,17 +585,25 @@ var definition = {
573
585
  }]
574
586
  })
575
587
  }, {
576
- name: 'callToAction',
577
- type: 'call-to-action',
578
- theme: {
579
- boxStyle: 'cta',
580
- label: {
581
- textStyle: 'cta'
582
- }
583
- }
588
+ name: 'header',
589
+ type: 'header',
590
+ label: defineMessage({
591
+ id: "rhuDxI",
592
+ defaultMessage: [{
593
+ "type": 0,
594
+ "value": "Header"
595
+ }]
596
+ })
584
597
  }, {
585
- name: 'shareIncentive',
586
- type: 'share-incentive'
598
+ name: 'footer',
599
+ type: 'footer',
600
+ label: defineMessage({
601
+ id: "g4nybp",
602
+ defaultMessage: [{
603
+ "type": 0,
604
+ "value": "Footer"
605
+ }]
606
+ })
587
607
  }]
588
608
  };
589
609
 
package/lib/index.js CHANGED
@@ -19,8 +19,9 @@ var utils = require('@micromag/core/utils');
19
19
  var data = require('@micromag/data');
20
20
  var Background = require('@micromag/element-background');
21
21
  var Button = require('@micromag/element-button');
22
- var CallToAction = require('@micromag/element-call-to-action');
23
22
  var Container = require('@micromag/element-container');
23
+ var Footer = require('@micromag/element-footer');
24
+ var Header = require('@micromag/element-header');
24
25
  var Heading = require('@micromag/element-heading');
25
26
  var Scroll = require('@micromag/element-scroll');
26
27
  var Text = require('@micromag/element-text');
@@ -36,14 +37,15 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
36
37
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
37
38
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
38
39
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
39
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
40
40
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
41
+ var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
42
+ var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
41
43
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
42
44
  var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
43
45
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
44
46
  var TextInput__default = /*#__PURE__*/_interopDefaultLegacy(TextInput);
45
47
 
46
- var styles = {"container":"micromag-screen-contribution-container","inner":"micromag-screen-contribution-inner","background":"micromag-screen-contribution-background","buttonSubmit":"micromag-screen-contribution-buttonSubmit","content":"micromag-screen-contribution-content","emptyTitle":"micromag-screen-contribution-emptyTitle","emptyInputName":"micromag-screen-contribution-emptyInputName","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptySubmit":"micromag-screen-contribution-emptySubmit","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputName":"micromag-screen-contribution-inputName","inputMessage":"micromag-screen-contribution-inputMessage","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","callToAction":"micromag-screen-contribution-callToAction","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
48
+ var styles = {"container":"micromag-screen-contribution-container","inner":"micromag-screen-contribution-inner","background":"micromag-screen-contribution-background","buttonSubmit":"micromag-screen-contribution-buttonSubmit","content":"micromag-screen-contribution-content","header":"micromag-screen-contribution-header","emptyTitle":"micromag-screen-contribution-emptyTitle","emptyInputName":"micromag-screen-contribution-emptyInputName","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptySubmit":"micromag-screen-contribution-emptySubmit","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputName":"micromag-screen-contribution-inputName","inputMessage":"micromag-screen-contribution-inputMessage","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","rotate":"micromag-screen-contribution-rotate","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","footer":"micromag-screen-contribution-footer","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
47
49
 
48
50
  var propTypes = {
49
51
  id: PropTypes__default["default"].string,
@@ -56,7 +58,8 @@ var propTypes = {
56
58
  messageStyle: core.PropTypes.textStyle,
57
59
  spacing: PropTypes__default["default"].number,
58
60
  background: core.PropTypes.backgroundElement,
59
- callToAction: core.PropTypes.callToAction,
61
+ header: core.PropTypes.header,
62
+ footer: core.PropTypes.footer,
60
63
  current: PropTypes__default["default"].bool,
61
64
  active: PropTypes__default["default"].bool,
62
65
  transitions: core.PropTypes.transitions,
@@ -76,7 +79,8 @@ var defaultProps = {
76
79
  messageStyle: null,
77
80
  spacing: 20,
78
81
  background: null,
79
- callToAction: null,
82
+ header: null,
83
+ footer: null,
80
84
  current: true,
81
85
  active: true,
82
86
  transitions: null,
@@ -86,7 +90,7 @@ var defaultProps = {
86
90
  className: null
87
91
  };
88
92
  var ContributionScreen = function ContributionScreen(_ref) {
89
- var _ref4;
93
+ var _ref3;
90
94
  var id = _ref.id,
91
95
  layout = _ref.layout,
92
96
  title = _ref.title,
@@ -97,7 +101,8 @@ var ContributionScreen = function ContributionScreen(_ref) {
97
101
  messageStyle = _ref.messageStyle,
98
102
  spacing = _ref.spacing,
99
103
  background = _ref.background,
100
- callToAction = _ref.callToAction,
104
+ header = _ref.header,
105
+ footer = _ref.footer,
101
106
  current = _ref.current,
102
107
  active = _ref.active,
103
108
  transitions = _ref.transitions,
@@ -132,9 +137,14 @@ var ContributionScreen = function ContributionScreen(_ref) {
132
137
  var transitionPlaying = current;
133
138
  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
134
139
  var scrollingDisabled = !isEdit && transitionDisabled || !current;
135
- var _ref2 = callToAction || {},
136
- _ref2$active = _ref2.active,
137
- hasCallToAction = _ref2$active === void 0 ? false : _ref2$active;
140
+ var hasHeader = utils.isHeaderFilled(header);
141
+ var hasFooter = utils.isFooterFilled(footer);
142
+ var footerProps = utils.getFooterProps(footer, {
143
+ isView: isView,
144
+ current: current,
145
+ openWebView: openWebView,
146
+ isPreview: isPreview
147
+ });
138
148
  var hasTitle = utils.isTextFilled(title);
139
149
  var hasNameLabel = utils.isLabelFilled(name);
140
150
  var hasMessageLabel = utils.isLabelFilled(message);
@@ -208,11 +218,11 @@ var ContributionScreen = function ContributionScreen(_ref) {
208
218
  setScrolledBottom = _useState10[1];
209
219
  var swipeUpLinkActive = scrolledBottom && submitState === 4;
210
220
  var _useDimensionObserver = hooks.useDimensionObserver(),
211
- callToActionRef = _useDimensionObserver.ref,
221
+ footerRef = _useDimensionObserver.ref,
212
222
  _useDimensionObserver2 = _useDimensionObserver.height,
213
223
  callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
214
- var onScrolledBottom = React.useCallback(function (_ref3) {
215
- var initial = _ref3.initial;
224
+ var onScrolledBottom = React.useCallback(function (_ref2) {
225
+ var initial = _ref2.initial;
216
226
  if (initial) {
217
227
  trackScreenEvent('scroll', 'Contributions list');
218
228
  }
@@ -414,13 +424,20 @@ var ContributionScreen = function ContributionScreen(_ref) {
414
424
  body: contribution.message,
415
425
  textStyle: messageInnerStyle
416
426
  }));
417
- })))), hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
427
+ })))), hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
418
428
  style: {
419
429
  height: callToActionHeight
420
430
  }
421
431
  }) : null));
432
+ var headerElement = !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
433
+ className: styles.header,
434
+ style: {
435
+ paddingBottom: spacing
436
+ }
437
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null;
438
+ var headerInScroll = submitState >= 4;
422
439
  return /*#__PURE__*/React__default["default"].createElement("div", {
423
- className: classNames__default["default"]([styles.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref4, styles.submitting, submitState === 1), _defineProperty__default["default"](_ref4, styles.submitted, submitState > 1), _defineProperty__default["default"](_ref4, styles.showContributions, submitState === 4), _ref4)]),
440
+ className: classNames__default["default"]([styles.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref3, styles.submitting, submitState === 1), _defineProperty__default["default"](_ref3, styles.submitted, submitState > 1), _defineProperty__default["default"](_ref3, styles.showContributions, submitState === 4), _ref3)]),
424
441
  "data-screen-ready": true
425
442
  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
426
443
  width: width,
@@ -434,25 +451,21 @@ var ContributionScreen = function ContributionScreen(_ref) {
434
451
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
435
452
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
436
453
  } : null
437
- }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
454
+ }, !headerInScroll ? headerElement : null, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
438
455
  verticalAlign: layout,
439
456
  disabled: scrollingDisabled,
440
457
  onScrolledBottom: onScrolledBottom,
441
458
  onScrolledNotBottom: onScrolledNotBottom
442
- }, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
443
- ref: callToActionRef,
444
- className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !swipeUpLinkActive)]),
459
+ }, headerInScroll ? headerElement : null, items), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
460
+ ref: footerRef,
461
+ className: classNames__default["default"]([styles.footer, _defineProperty__default["default"]({}, styles.disabled, !swipeUpLinkActive)]),
445
462
  style: {
446
463
  paddingLeft: Math.max(viewerBottomSidesWidth, spacing / 2),
447
464
  paddingRight: Math.max(viewerBottomSidesWidth, spacing / 2),
448
465
  paddingTop: 0,
449
466
  paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing / 2
450
467
  }
451
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
452
- animationDisabled: isPreview,
453
- focusable: current && isView,
454
- openWebView: openWebView
455
- }))) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
468
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
456
469
  background: background,
457
470
  width: width,
458
471
  height: height,
@@ -594,17 +607,25 @@ var definition = {
594
607
  }]
595
608
  })
596
609
  }, {
597
- name: 'callToAction',
598
- type: 'call-to-action',
599
- theme: {
600
- boxStyle: 'cta',
601
- label: {
602
- textStyle: 'cta'
603
- }
604
- }
610
+ name: 'header',
611
+ type: 'header',
612
+ label: reactIntl.defineMessage({
613
+ id: "rhuDxI",
614
+ defaultMessage: [{
615
+ "type": 0,
616
+ "value": "Header"
617
+ }]
618
+ })
605
619
  }, {
606
- name: 'shareIncentive',
607
- type: 'share-incentive'
620
+ name: 'footer',
621
+ type: 'footer',
622
+ label: reactIntl.defineMessage({
623
+ id: "g4nybp",
624
+ defaultMessage: [{
625
+ "type": 0,
626
+ "value": "Footer"
627
+ }]
628
+ })
608
629
  }]
609
630
  };
610
631
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-contribution",
3
- "version": "0.3.349",
3
+ "version": "0.3.356",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -52,18 +52,19 @@
52
52
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
53
53
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
54
54
  "@fortawesome/react-fontawesome": "^0.1.13",
55
- "@micromag/core": "^0.3.348",
56
- "@micromag/data": "^0.3.348",
57
- "@micromag/element-background": "^0.3.348",
58
- "@micromag/element-button": "^0.3.348",
59
- "@micromag/element-call-to-action": "^0.3.348",
60
- "@micromag/element-container": "^0.3.348",
61
- "@micromag/element-heading": "^0.3.348",
62
- "@micromag/element-scroll": "^0.3.349",
63
- "@micromag/element-share-incentive": "^0.3.348",
64
- "@micromag/element-text": "^0.3.348",
65
- "@micromag/element-text-input": "^0.3.348",
66
- "@micromag/transforms": "^0.3.348",
55
+ "@micromag/core": "^0.3.354",
56
+ "@micromag/data": "^0.3.354",
57
+ "@micromag/element-background": "^0.3.354",
58
+ "@micromag/element-button": "^0.3.354",
59
+ "@micromag/element-container": "^0.3.354",
60
+ "@micromag/element-footer": "^0.3.354",
61
+ "@micromag/element-header": "^0.3.356",
62
+ "@micromag/element-heading": "^0.3.354",
63
+ "@micromag/element-scroll": "^0.3.354",
64
+ "@micromag/element-share-incentive": "^0.3.354",
65
+ "@micromag/element-text": "^0.3.354",
66
+ "@micromag/element-text-input": "^0.3.354",
67
+ "@micromag/transforms": "^0.3.354",
67
68
  "classnames": "^2.2.6",
68
69
  "lodash": "^4.17.21",
69
70
  "prop-types": "^15.7.2",
@@ -73,5 +74,5 @@
73
74
  "publishConfig": {
74
75
  "access": "public"
75
76
  },
76
- "gitHead": "5e3c2c33b7e3c1833b1c43f97792b11d746864b1"
77
+ "gitHead": "683c410d9fc568658e5907fb0a8fa470cb04f6eb"
77
78
  }