@micromag/screen-contribution 0.2.286

package/assets/css/styles.css

@@ -0,0 +1 @@
+.micromag-screen-contribution-container .micromag-screen-contribution-content{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-contribution-container{position:relative}@-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;width:100%;padding:4px}.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{position:absolute;top:50%;left:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;-webkit-animation:micromag-screen-contribution-rotate 1s linear infinite;animation:micromag-screen-contribution-rotate 1s linear infinite;opacity:0;pointer-events:none}.micromag-screen-contribution-container .micromag-screen-contribution-formLoading .micromag-screen-contribution-loadingIcon{display:block;width:100%;height:100%}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContainer{position:relative;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease;opacity:0}.micromag-screen-contribution-container .micromag-screen-contribution-contributionsContent{position:absolute;width:100%;height:0;overflow:hidden}.micromag-screen-contribution-container .micromag-screen-contribution-contributions{position:relative}.micromag-screen-contribution-container .micromag-screen-contribution-contribution{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #fff}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:first-child{padding-top:20px;border-top:1px solid #fff}.micromag-screen-contribution-container .micromag-screen-contribution-contribution:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}.micromag-screen-contribution-container .micromag-screen-contribution-callToAction{position:absolute;bottom:0;left:0;width:100%}.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{position:relative;height:auto;overflow:visible}.micromag-screen-contribution-container.micromag-screen-contribution-isPlaceholder .micromag-screen-contribution-content{padding:10px}

package/es/index.js

@@ -0,0 +1,574 @@
+import { FormattedMessage, defineMessage } from 'react-intl';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
+import { useTrackScreenEvent, useResizeObserver } from '@micromag/core/hooks';
+import { ScreenElement, Transitions } from '@micromag/core/components';
+import { isTextFilled, isLabelFilled, getStyleFromColor } from '@micromag/core/utils';
+import { useContributionCreate, useContributions } from '@micromag/data';
+import Background from '@micromag/element-background';
+import Button from '@micromag/element-button';
+import Container from '@micromag/element-container';
+import Heading from '@micromag/element-heading';
+import Scroll from '@micromag/element-scroll';
+import CallToAction from '@micromag/element-call-to-action';
+import Text from '@micromag/element-text';
+import TextInput from '@micromag/element-text-input';
+
+var styles = {"container":"micromag-screen-contribution-container","content":"micromag-screen-contribution-content","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptyInputName":"micromag-screen-contribution-emptyInputName","emptySubmit":"micromag-screen-contribution-emptySubmit","emptyTitle":"micromag-screen-contribution-emptyTitle","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","buttonSubmit":"micromag-screen-contribution-buttonSubmit","inputMessage":"micromag-screen-contribution-inputMessage","inputName":"micromag-screen-contribution-inputName","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","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
+
+var propTypes = {
+  id: PropTypes.string,
+  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  title: PropTypes$1.headingElement,
+  name: PropTypes$1.inputElement,
+  message: PropTypes$1.inputElement,
+  submit: PropTypes$1.textElement,
+  nameStyle: PropTypes$1.textStyle,
+  messageStyle: PropTypes$1.textStyle,
+  spacing: PropTypes.number,
+  background: PropTypes$1.backgroundElement,
+  callToAction: PropTypes$1.callToAction,
+  current: PropTypes.bool,
+  transitions: PropTypes$1.transitions,
+  transitionStagger: PropTypes.number,
+  resizeTransitionDuration: PropTypes.number,
+  type: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps = {
+  id: null,
+  layout: 'middle',
+  title: null,
+  name: null,
+  message: null,
+  submit: null,
+  nameStyle: null,
+  messageStyle: null,
+  spacing: 20,
+  background: null,
+  callToAction: null,
+  current: true,
+  transitions: null,
+  transitionStagger: 100,
+  resizeTransitionDuration: 750,
+  type: null,
+  className: null
+};
+
+var ContributionScreen = function ContributionScreen(_ref) {
+  var _ref4;
+
+  var id = _ref.id,
+      layout = _ref.layout,
+      title = _ref.title,
+      name = _ref.name,
+      message = _ref.message,
+      submit = _ref.submit,
+      nameStyle = _ref.nameStyle,
+      messageStyle = _ref.messageStyle,
+      spacing = _ref.spacing,
+      background = _ref.background,
+      callToAction = _ref.callToAction,
+      current = _ref.current,
+      transitions = _ref.transitions,
+      transitionStagger = _ref.transitionStagger,
+      resizeTransitionDuration = _ref.resizeTransitionDuration,
+      type = _ref.type,
+      className = _ref.className;
+  var screenId = id || 'screen-id';
+  var trackScreenEvent = useTrackScreenEvent(type);
+
+  var _useScreenSize = useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      menuOverScreen = _useScreenSize.menuOverScreen;
+
+  var _useViewer = useViewer(),
+      menuSize = _useViewer.menuSize;
+
+  var _useScreenRenderConte = useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
+  var backgroundPlaying = current && (isView || isEdit);
+  var transitionPlaying = current;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  var scrollingDisabled = !isEdit && transitionDisabled || !current;
+  var hasTitle = isTextFilled(title);
+  var hasNameLabel = isLabelFilled(name);
+  var hasMessageLabel = isLabelFilled(message);
+  var hasSubmit = isTextFilled(submit);
+  var contributionsRef = useRef(null);
+  var formRef = useRef(null);
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      interactiveContainerHeight = _useState2[0],
+      setInteractiveContainerHeight = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      userName = _useState4[0],
+      setUserName = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      userMessage = _useState6[0],
+      setUserMessage = _useState6[1]; // 0 = default, 1 = submitting, 2 = submitted, 3 = resizing, 4 = done
+
+
+  var _useState7 = useState(isStatic || isCapture ? 4 : 0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      submitState = _useState8[0],
+      setSubmitState = _useState8[1];
+
+  var onContributionSubmitted = useCallback(function () {
+    setSubmitState(2);
+    trackScreenEvent('submit_success', "".concat(userName, ": ").concat(userMessage));
+  }, [setSubmitState, trackScreenEvent, userName, userMessage]);
+
+  var _useContributionCreat = useContributionCreate({
+    screenId: screenId
+  }),
+      submitContribution = _useContributionCreat.create;
+
+  var _useContributions = useContributions({
+    screenId: screenId,
+    opts: {
+      autoload: !isPlaceholder
+    }
+  }),
+      contributions = _useContributions.contributions;
+
+  var onNameChange = useCallback(function (e) {
+    setUserName(e.currentTarget.value);
+  }, [setUserName]);
+  var onMessageChange = useCallback(function (e) {
+    setUserMessage(e.currentTarget.value);
+  }, [setUserMessage]);
+  var nameFilled = useRef(false);
+  var onNameBlur = useCallback(function (e) {
+    if (!nameFilled.current && e.currentTarget.value.length > 0) {
+      nameFilled.current = true;
+      trackScreenEvent('input_filled', 'Name', {
+        userName: e.currentTarget.value,
+        userMessage: userMessage
+      });
+    }
+  }, [trackScreenEvent, userMessage]);
+  var messageFilled = useRef(false);
+  var onMessageBlur = useCallback(function (e) {
+    if (!messageFilled.current && e.currentTarget.value.length > 0) {
+      messageFilled.current = true;
+      trackScreenEvent('input_filled', 'Message', {
+        userName: userName,
+        userMessage: e.currentTarget.value
+      });
+    }
+  }, [trackScreenEvent, userName]); // Call to Action
+
+  var hasCallToAction = callToAction !== null && callToAction.active === true;
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      scrolledBottom = _useState10[0],
+      setScrolledBottom = _useState10[1];
+
+  var swipeUpLinkActive = scrolledBottom && submitState === 4;
+
+  var _useResizeObserver = useResizeObserver(),
+      callToActionRef = _useResizeObserver.ref,
+      callToActionRect = _useResizeObserver.entry.contentRect;
+
+  var _ref2 = callToActionRect || {},
+      _ref2$height = _ref2.height,
+      callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
+
+  var onScrolledBottom = useCallback(function (_ref3) {
+    var initial = _ref3.initial;
+
+    if (initial) {
+      trackScreenEvent('scroll', 'Contributions list');
+    }
+
+    setScrolledBottom(true);
+  }, [trackScreenEvent, setScrolledBottom]);
+  var onScrolledNotBottom = useCallback(function () {
+    setScrolledBottom(false);
+  }, [setScrolledBottom]);
+  var onSubmit = useCallback(function (e) {
+    e.preventDefault();
+
+    if (submitState === 0) {
+      setInteractiveContainerHeight(formRef.current.offsetHeight);
+      setSubmitState(1);
+      submitContribution({
+        name: userName,
+        message: userMessage
+      });
+      onContributionSubmitted();
+      trackScreenEvent('click_submit', "".concat(userName, ": ").concat(userMessage), {
+        userName: userName,
+        userMessage: userMessage
+      });
+    }
+  }, [submitState, setSubmitState, userName, userMessage, trackScreenEvent, onContributionSubmitted]);
+  useEffect(function () {
+    var timeout = null;
+
+    if (submitState === 2) {
+      timeout = setTimeout(setSubmitState, resizeTransitionDuration, 4);
+      setInteractiveContainerHeight(contributionsRef.current.offsetHeight);
+      setSubmitState(3);
+    }
+
+    return function () {
+      if (submitState === 3 && timeout !== null) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [submitState, setInteractiveContainerHeight, setSubmitState, resizeTransitionDuration]); // Title
+
+  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
+    key: "title",
+    placeholder: "title",
+    placeholderProps: {
+      height: '0.75em'
+    },
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "2ZOPe+",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    }),
+    emptyClassName: styles.emptyTitle,
+    isEmpty: !hasTitle
+  }, hasTitle ? /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(Heading, Object.assign({}, title, {
+    className: styles.title
+  }))) : null)];
+  var allContributions = [].concat(_toConsumableArray(userName !== null && userMessage !== null ? [{
+    name: userName,
+    message: userMessage
+  }] : []), _toConsumableArray(contributions || [])); // Form
+
+  items.push( /*#__PURE__*/React.createElement("div", {
+    key: "form",
+    className: styles.interactiveContainer,
+    style: {
+      height: submitState < 4 ? interactiveContainerHeight : null,
+      transitionDuration: "".concat(resizeTransitionDuration, "ms")
+    }
+  }, /*#__PURE__*/React.createElement("form", {
+    className: styles.form,
+    onSubmit: onSubmit,
+    ref: formRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.formContent
+  }, /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "inputText",
+    placeholderProps: {
+      height: '0.25em'
+    },
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "G/ITGY",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Your name"
+      }]
+    }),
+    emptyClassName: styles.emptyInputName,
+    isEmpty: !hasNameLabel
+  }, /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    delay: transitionStagger,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(TextInput, Object.assign({
+    className: styles.inputName
+  }, name, {
+    value: userName,
+    onChange: function onChange(e) {
+      return onNameChange(e);
+    },
+    onBlur: function onBlur(e) {
+      return onNameBlur(e);
+    },
+    disabled: isPreview,
+    required: true
+  })))), /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "inputText",
+    placeholderProps: {
+      height: '0.75em'
+    },
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "JAguka",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Your message"
+      }]
+    }),
+    emptyClassName: styles.emptyInputMessage,
+    isEmpty: !hasMessageLabel
+  }, /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    delay: transitionStagger * 2,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(TextInput, Object.assign({
+    className: styles.inputMessage
+  }, message, {
+    value: userMessage,
+    onChange: function onChange(e) {
+      return onMessageChange(e);
+    },
+    onBlur: function onBlur(e) {
+      return onMessageBlur(e);
+    },
+    disabled: isPreview,
+    multiline: true,
+    required: true
+  })))), /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "button",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "5uH4x7",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Submit"
+      }]
+    }),
+    emptyClassName: styles.emptySubmit,
+    isEmpty: !hasSubmit
+  }, /*#__PURE__*/React.createElement(Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    delay: transitionStagger * 3,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    className: styles.buttonSubmit,
+    disabled: isPreview,
+    buttonStyle: submit !== null ? submit.buttonStyle : null
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, submit, {
+    inline: true
+  })))))), /*#__PURE__*/React.createElement("div", {
+    className: styles.formLoading
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: styles.loadingIcon,
+    icon: faSpinner
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.contributionsContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.contributionsContent
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.contributions,
+    ref: contributionsRef
+  }, allContributions.map(function (contribution, contributionIndex) {
+    var nameInnerStyle = nameStyle !== null ? nameStyle.style || null : null;
+    var messageInnerStyle = messageStyle !== null ? messageStyle.style || null : null;
+    return /*#__PURE__*/React.createElement("div", {
+      key: "contribution-".concat(contributionIndex),
+      className: styles.contribution,
+      style: nameInnerStyle !== null ? getStyleFromColor(nameInnerStyle.color, 'borderColor') : null
+    }, /*#__PURE__*/React.createElement(Heading, {
+      className: styles.contributionName,
+      body: contribution.name,
+      size: 2,
+      textStyle: nameInnerStyle
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: styles.contributionMessage,
+      body: contribution.message,
+      textStyle: messageInnerStyle
+    }));
+  })))), hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: callToActionHeight
+    }
+  }) : null));
+  return /*#__PURE__*/React.createElement("div", {
+    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)]),
+    "data-screen-ready": true
+  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, Object.assign({}, background, {
+    width: width,
+    height: height,
+    playing: backgroundPlaying
+  })) : null, /*#__PURE__*/React.createElement(Container, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+    } : null
+  }, /*#__PURE__*/React.createElement(Scroll, {
+    verticalAlign: layout,
+    disabled: scrollingDisabled,
+    onScrolledBottom: onScrolledBottom,
+    onScrolledNotBottom: onScrolledNotBottom
+  }, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement(CallToAction, {
+    ref: callToActionRef,
+    className: styles.callToAction,
+    disabled: !swipeUpLinkActive,
+    animationDisabled: isPreview,
+    callToAction: callToAction
+  }) : null)));
+};
+
+ContributionScreen.propTypes = propTypes;
+ContributionScreen.defaultProps = defaultProps;
+
+var definition = {
+  id: 'contribution',
+  type: 'screen',
+  group: {
+    label: defineMessage({
+      "id": "ZqwBOx",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Questions"
+      }]
+    }),
+    order: 7
+  },
+  title: defineMessage({
+    "id": "g6b9Lg",
+    "defaultMessage": [{
+      "type": 0,
+      "value": "Contribution"
+    }]
+  }),
+  component: ContributionScreen,
+  layouts: ['top', 'middle', 'bottom'],
+  fields: [{
+    name: 'layout',
+    type: 'screen-layout',
+    defaultValue: 'top',
+    label: defineMessage({
+      "id": "4iBXj2",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    })
+  }, {
+    name: 'title',
+    type: 'heading-element',
+    theme: {
+      textStyle: 'heading2'
+    },
+    label: defineMessage({
+      "id": "N25iDO",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
+    name: 'name',
+    type: 'input-element',
+    theme: {
+      textStyle: 'text'
+    },
+    label: defineMessage({
+      "id": "nXVNeg",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Name"
+      }]
+    })
+  }, {
+    name: 'message',
+    type: 'input-element',
+    theme: {
+      textStyle: 'text'
+    },
+    label: defineMessage({
+      "id": "RcLsua",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Message"
+      }]
+    })
+  }, {
+    name: 'submit',
+    type: 'button-element',
+    theme: {
+      textStyle: 'button'
+    },
+    label: defineMessage({
+      "id": "uAKPQ9",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Submit"
+      }]
+    })
+  }, {
+    name: 'nameStyle',
+    type: 'item-text-style',
+    theme: {
+      style: {
+        textStyle: 'heading2'
+      }
+    },
+    label: defineMessage({
+      "id": "SyMSDa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Published name style"
+      }]
+    })
+  }, {
+    name: 'messageStyle',
+    type: 'item-text-style',
+    theme: {
+      style: {
+        textStyle: 'text'
+      }
+    },
+    label: defineMessage({
+      "id": "+SlKOi",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Published message style"
+      }]
+    })
+  }, {
+    name: 'background',
+    type: 'background',
+    label: defineMessage({
+      "id": "+MPZRu",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'callToAction',
+    type: 'call-to-action',
+    theme: {
+      label: {
+        textStyle: 'heading2'
+      }
+    }
+  }]
+};
+
+export default definition;
+export { ContributionScreen };

package/lib/index.js

@@ -0,0 +1,595 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIntl = require('react-intl');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var PropTypes = require('prop-types');
+var classNames = require('classnames');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var core = require('@micromag/core');
+var contexts = require('@micromag/core/contexts');
+var hooks = require('@micromag/core/hooks');
+var components = require('@micromag/core/components');
+var utils = require('@micromag/core/utils');
+var data = require('@micromag/data');
+var Background = require('@micromag/element-background');
+var Button = require('@micromag/element-button');
+var Container = require('@micromag/element-container');
+var Heading = require('@micromag/element-heading');
+var Scroll = require('@micromag/element-scroll');
+var CallToAction = require('@micromag/element-call-to-action');
+var Text = require('@micromag/element-text');
+var TextInput = require('@micromag/element-text-input');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
+var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
+var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
+var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
+var TextInput__default = /*#__PURE__*/_interopDefaultLegacy(TextInput);
+
+var styles = {"container":"micromag-screen-contribution-container","content":"micromag-screen-contribution-content","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptyInputName":"micromag-screen-contribution-emptyInputName","emptySubmit":"micromag-screen-contribution-emptySubmit","emptyTitle":"micromag-screen-contribution-emptyTitle","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","buttonSubmit":"micromag-screen-contribution-buttonSubmit","inputMessage":"micromag-screen-contribution-inputMessage","inputName":"micromag-screen-contribution-inputName","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","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder"};
+
+var propTypes = {
+  id: PropTypes__default['default'].string,
+  layout: PropTypes__default['default'].oneOf(['top', 'middle', 'bottom']),
+  title: core.PropTypes.headingElement,
+  name: core.PropTypes.inputElement,
+  message: core.PropTypes.inputElement,
+  submit: core.PropTypes.textElement,
+  nameStyle: core.PropTypes.textStyle,
+  messageStyle: core.PropTypes.textStyle,
+  spacing: PropTypes__default['default'].number,
+  background: core.PropTypes.backgroundElement,
+  callToAction: core.PropTypes.callToAction,
+  current: PropTypes__default['default'].bool,
+  transitions: core.PropTypes.transitions,
+  transitionStagger: PropTypes__default['default'].number,
+  resizeTransitionDuration: PropTypes__default['default'].number,
+  type: PropTypes__default['default'].string,
+  className: PropTypes__default['default'].string
+};
+var defaultProps = {
+  id: null,
+  layout: 'middle',
+  title: null,
+  name: null,
+  message: null,
+  submit: null,
+  nameStyle: null,
+  messageStyle: null,
+  spacing: 20,
+  background: null,
+  callToAction: null,
+  current: true,
+  transitions: null,
+  transitionStagger: 100,
+  resizeTransitionDuration: 750,
+  type: null,
+  className: null
+};
+
+var ContributionScreen = function ContributionScreen(_ref) {
+  var _ref4;
+
+  var id = _ref.id,
+      layout = _ref.layout,
+      title = _ref.title,
+      name = _ref.name,
+      message = _ref.message,
+      submit = _ref.submit,
+      nameStyle = _ref.nameStyle,
+      messageStyle = _ref.messageStyle,
+      spacing = _ref.spacing,
+      background = _ref.background,
+      callToAction = _ref.callToAction,
+      current = _ref.current,
+      transitions = _ref.transitions,
+      transitionStagger = _ref.transitionStagger,
+      resizeTransitionDuration = _ref.resizeTransitionDuration,
+      type = _ref.type,
+      className = _ref.className;
+  var screenId = id || 'screen-id';
+  var trackScreenEvent = hooks.useTrackScreenEvent(type);
+
+  var _useScreenSize = contexts.useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      menuOverScreen = _useScreenSize.menuOverScreen;
+
+  var _useViewer = contexts.useViewer(),
+      menuSize = _useViewer.menuSize;
+
+  var _useScreenRenderConte = contexts.useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
+  var backgroundPlaying = current && (isView || isEdit);
+  var transitionPlaying = current;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  var scrollingDisabled = !isEdit && transitionDisabled || !current;
+  var hasTitle = utils.isTextFilled(title);
+  var hasNameLabel = utils.isLabelFilled(name);
+  var hasMessageLabel = utils.isLabelFilled(message);
+  var hasSubmit = utils.isTextFilled(submit);
+  var contributionsRef = React.useRef(null);
+  var formRef = React.useRef(null);
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      interactiveContainerHeight = _useState2[0],
+      setInteractiveContainerHeight = _useState2[1];
+
+  var _useState3 = React.useState(''),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      userName = _useState4[0],
+      setUserName = _useState4[1];
+
+  var _useState5 = React.useState(''),
+      _useState6 = _slicedToArray__default['default'](_useState5, 2),
+      userMessage = _useState6[0],
+      setUserMessage = _useState6[1]; // 0 = default, 1 = submitting, 2 = submitted, 3 = resizing, 4 = done
+
+
+  var _useState7 = React.useState(isStatic || isCapture ? 4 : 0),
+      _useState8 = _slicedToArray__default['default'](_useState7, 2),
+      submitState = _useState8[0],
+      setSubmitState = _useState8[1];
+
+  var onContributionSubmitted = React.useCallback(function () {
+    setSubmitState(2);
+    trackScreenEvent('submit_success', "".concat(userName, ": ").concat(userMessage));
+  }, [setSubmitState, trackScreenEvent, userName, userMessage]);
+
+  var _useContributionCreat = data.useContributionCreate({
+    screenId: screenId
+  }),
+      submitContribution = _useContributionCreat.create;
+
+  var _useContributions = data.useContributions({
+    screenId: screenId,
+    opts: {
+      autoload: !isPlaceholder
+    }
+  }),
+      contributions = _useContributions.contributions;
+
+  var onNameChange = React.useCallback(function (e) {
+    setUserName(e.currentTarget.value);
+  }, [setUserName]);
+  var onMessageChange = React.useCallback(function (e) {
+    setUserMessage(e.currentTarget.value);
+  }, [setUserMessage]);
+  var nameFilled = React.useRef(false);
+  var onNameBlur = React.useCallback(function (e) {
+    if (!nameFilled.current && e.currentTarget.value.length > 0) {
+      nameFilled.current = true;
+      trackScreenEvent('input_filled', 'Name', {
+        userName: e.currentTarget.value,
+        userMessage: userMessage
+      });
+    }
+  }, [trackScreenEvent, userMessage]);
+  var messageFilled = React.useRef(false);
+  var onMessageBlur = React.useCallback(function (e) {
+    if (!messageFilled.current && e.currentTarget.value.length > 0) {
+      messageFilled.current = true;
+      trackScreenEvent('input_filled', 'Message', {
+        userName: userName,
+        userMessage: e.currentTarget.value
+      });
+    }
+  }, [trackScreenEvent, userName]); // Call to Action
+
+  var hasCallToAction = callToAction !== null && callToAction.active === true;
+
+  var _useState9 = React.useState(false),
+      _useState10 = _slicedToArray__default['default'](_useState9, 2),
+      scrolledBottom = _useState10[0],
+      setScrolledBottom = _useState10[1];
+
+  var swipeUpLinkActive = scrolledBottom && submitState === 4;
+
+  var _useResizeObserver = hooks.useResizeObserver(),
+      callToActionRef = _useResizeObserver.ref,
+      callToActionRect = _useResizeObserver.entry.contentRect;
+
+  var _ref2 = callToActionRect || {},
+      _ref2$height = _ref2.height,
+      callToActionHeight = _ref2$height === void 0 ? 0 : _ref2$height;
+
+  var onScrolledBottom = React.useCallback(function (_ref3) {
+    var initial = _ref3.initial;
+
+    if (initial) {
+      trackScreenEvent('scroll', 'Contributions list');
+    }
+
+    setScrolledBottom(true);
+  }, [trackScreenEvent, setScrolledBottom]);
+  var onScrolledNotBottom = React.useCallback(function () {
+    setScrolledBottom(false);
+  }, [setScrolledBottom]);
+  var onSubmit = React.useCallback(function (e) {
+    e.preventDefault();
+
+    if (submitState === 0) {
+      setInteractiveContainerHeight(formRef.current.offsetHeight);
+      setSubmitState(1);
+      submitContribution({
+        name: userName,
+        message: userMessage
+      });
+      onContributionSubmitted();
+      trackScreenEvent('click_submit', "".concat(userName, ": ").concat(userMessage), {
+        userName: userName,
+        userMessage: userMessage
+      });
+    }
+  }, [submitState, setSubmitState, userName, userMessage, trackScreenEvent, onContributionSubmitted]);
+  React.useEffect(function () {
+    var timeout = null;
+
+    if (submitState === 2) {
+      timeout = setTimeout(setSubmitState, resizeTransitionDuration, 4);
+      setInteractiveContainerHeight(contributionsRef.current.offsetHeight);
+      setSubmitState(3);
+    }
+
+    return function () {
+      if (submitState === 3 && timeout !== null) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [submitState, setInteractiveContainerHeight, setSubmitState, resizeTransitionDuration]); // Title
+
+  var items = [/*#__PURE__*/React__default['default'].createElement(components.ScreenElement, {
+    key: "title",
+    placeholder: "title",
+    placeholderProps: {
+      height: '0.75em'
+    },
+    emptyLabel: /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, {
+      id: "2ZOPe+",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    }),
+    emptyClassName: styles.emptyTitle,
+    isEmpty: !hasTitle
+  }, hasTitle ? /*#__PURE__*/React__default['default'].createElement(components.Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React__default['default'].createElement(Heading__default['default'], Object.assign({}, title, {
+    className: styles.title
+  }))) : null)];
+  var allContributions = [].concat(_toConsumableArray__default['default'](userName !== null && userMessage !== null ? [{
+    name: userName,
+    message: userMessage
+  }] : []), _toConsumableArray__default['default'](contributions || [])); // Form
+
+  items.push( /*#__PURE__*/React__default['default'].createElement("div", {
+    key: "form",
+    className: styles.interactiveContainer,
+    style: {
+      height: submitState < 4 ? interactiveContainerHeight : null,
+      transitionDuration: "".concat(resizeTransitionDuration, "ms")
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("form", {
+    className: styles.form,
+    onSubmit: onSubmit,
+    ref: formRef
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: styles.formContent
+  }, /*#__PURE__*/React__default['default'].createElement(components.ScreenElement, {
+    placeholder: "inputText",
+    placeholderProps: {
+      height: '0.25em'
+    },
+    emptyLabel: /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, {
+      id: "G/ITGY",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Your name"
+      }]
+    }),
+    emptyClassName: styles.emptyInputName,
+    isEmpty: !hasNameLabel
+  }, /*#__PURE__*/React__default['default'].createElement(components.Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    delay: transitionStagger,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React__default['default'].createElement(TextInput__default['default'], Object.assign({
+    className: styles.inputName
+  }, name, {
+    value: userName,
+    onChange: function onChange(e) {
+      return onNameChange(e);
+    },
+    onBlur: function onBlur(e) {
+      return onNameBlur(e);
+    },
+    disabled: isPreview,
+    required: true
+  })))), /*#__PURE__*/React__default['default'].createElement(components.ScreenElement, {
+    placeholder: "inputText",
+    placeholderProps: {
+      height: '0.75em'
+    },
+    emptyLabel: /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, {
+      id: "JAguka",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Your message"
+      }]
+    }),
+    emptyClassName: styles.emptyInputMessage,
+    isEmpty: !hasMessageLabel
+  }, /*#__PURE__*/React__default['default'].createElement(components.Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    delay: transitionStagger * 2,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React__default['default'].createElement(TextInput__default['default'], Object.assign({
+    className: styles.inputMessage
+  }, message, {
+    value: userMessage,
+    onChange: function onChange(e) {
+      return onMessageChange(e);
+    },
+    onBlur: function onBlur(e) {
+      return onMessageBlur(e);
+    },
+    disabled: isPreview,
+    multiline: true,
+    required: true
+  })))), /*#__PURE__*/React__default['default'].createElement(components.ScreenElement, {
+    placeholder: "button",
+    emptyLabel: /*#__PURE__*/React__default['default'].createElement(reactIntl.FormattedMessage, {
+      id: "5uH4x7",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Submit"
+      }]
+    }),
+    emptyClassName: styles.emptySubmit,
+    isEmpty: !hasSubmit
+  }, /*#__PURE__*/React__default['default'].createElement(components.Transitions, {
+    transitions: transitions,
+    playing: transitionPlaying,
+    delay: transitionStagger * 3,
+    disabled: transitionDisabled
+  }, /*#__PURE__*/React__default['default'].createElement(Button__default['default'], {
+    type: "submit",
+    className: styles.buttonSubmit,
+    disabled: isPreview,
+    buttonStyle: submit !== null ? submit.buttonStyle : null
+  }, /*#__PURE__*/React__default['default'].createElement(Text__default['default'], Object.assign({}, submit, {
+    inline: true
+  })))))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: styles.formLoading
+  }, /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: styles.loadingIcon,
+    icon: freeSolidSvgIcons.faSpinner
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: styles.contributionsContainer
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: styles.contributionsContent
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: styles.contributions,
+    ref: contributionsRef
+  }, allContributions.map(function (contribution, contributionIndex) {
+    var nameInnerStyle = nameStyle !== null ? nameStyle.style || null : null;
+    var messageInnerStyle = messageStyle !== null ? messageStyle.style || null : null;
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: "contribution-".concat(contributionIndex),
+      className: styles.contribution,
+      style: nameInnerStyle !== null ? utils.getStyleFromColor(nameInnerStyle.color, 'borderColor') : null
+    }, /*#__PURE__*/React__default['default'].createElement(Heading__default['default'], {
+      className: styles.contributionName,
+      body: contribution.name,
+      size: 2,
+      textStyle: nameInnerStyle
+    }), /*#__PURE__*/React__default['default'].createElement(Text__default['default'], {
+      className: styles.contributionMessage,
+      body: contribution.message,
+      textStyle: messageInnerStyle
+    }));
+  })))), hasCallToAction ? /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      height: callToActionHeight
+    }
+  }) : null));
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    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)]),
+    "data-screen-ready": true
+  }, !isPlaceholder ? /*#__PURE__*/React__default['default'].createElement(Background__default['default'], Object.assign({}, background, {
+    width: width,
+    height: height,
+    playing: backgroundPlaying
+  })) : null, /*#__PURE__*/React__default['default'].createElement(Container__default['default'], {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: styles.content,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
+    } : null
+  }, /*#__PURE__*/React__default['default'].createElement(Scroll__default['default'], {
+    verticalAlign: layout,
+    disabled: scrollingDisabled,
+    onScrolledBottom: onScrolledBottom,
+    onScrolledNotBottom: onScrolledNotBottom
+  }, items), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default['default'].createElement(CallToAction__default['default'], {
+    ref: callToActionRef,
+    className: styles.callToAction,
+    disabled: !swipeUpLinkActive,
+    animationDisabled: isPreview,
+    callToAction: callToAction
+  }) : null)));
+};
+
+ContributionScreen.propTypes = propTypes;
+ContributionScreen.defaultProps = defaultProps;
+
+var definition = {
+  id: 'contribution',
+  type: 'screen',
+  group: {
+    label: reactIntl.defineMessage({
+      "id": "ZqwBOx",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Questions"
+      }]
+    }),
+    order: 7
+  },
+  title: reactIntl.defineMessage({
+    "id": "g6b9Lg",
+    "defaultMessage": [{
+      "type": 0,
+      "value": "Contribution"
+    }]
+  }),
+  component: ContributionScreen,
+  layouts: ['top', 'middle', 'bottom'],
+  fields: [{
+    name: 'layout',
+    type: 'screen-layout',
+    defaultValue: 'top',
+    label: reactIntl.defineMessage({
+      "id": "4iBXj2",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    })
+  }, {
+    name: 'title',
+    type: 'heading-element',
+    theme: {
+      textStyle: 'heading2'
+    },
+    label: reactIntl.defineMessage({
+      "id": "N25iDO",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
+    name: 'name',
+    type: 'input-element',
+    theme: {
+      textStyle: 'text'
+    },
+    label: reactIntl.defineMessage({
+      "id": "nXVNeg",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Name"
+      }]
+    })
+  }, {
+    name: 'message',
+    type: 'input-element',
+    theme: {
+      textStyle: 'text'
+    },
+    label: reactIntl.defineMessage({
+      "id": "RcLsua",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Message"
+      }]
+    })
+  }, {
+    name: 'submit',
+    type: 'button-element',
+    theme: {
+      textStyle: 'button'
+    },
+    label: reactIntl.defineMessage({
+      "id": "uAKPQ9",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Submit"
+      }]
+    })
+  }, {
+    name: 'nameStyle',
+    type: 'item-text-style',
+    theme: {
+      style: {
+        textStyle: 'heading2'
+      }
+    },
+    label: reactIntl.defineMessage({
+      "id": "SyMSDa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Published name style"
+      }]
+    })
+  }, {
+    name: 'messageStyle',
+    type: 'item-text-style',
+    theme: {
+      style: {
+        textStyle: 'text'
+      }
+    },
+    label: reactIntl.defineMessage({
+      "id": "+SlKOi",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Published message style"
+      }]
+    })
+  }, {
+    name: 'background',
+    type: 'background',
+    label: reactIntl.defineMessage({
+      "id": "+MPZRu",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'callToAction',
+    type: 'call-to-action',
+    theme: {
+      label: {
+        textStyle: 'heading2'
+      }
+    }
+  }]
+};
+
+exports.ContributionScreen = ContributionScreen;
+exports.default = definition;

package/package.json

@@ -0,0 +1,76 @@
+{
+    "name": "@micromag/screen-contribution",
+    "version": "0.2.286",
+    "description": "",
+    "keywords": [
+        "javascript"
+    ],
+    "homepage": "https://github.com/urbania-media/micromag-js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/urbania-media/micromag-js.git"
+    },
+    "author": {
+        "name": "Folklore",
+        "email": "info@folklore.email"
+    },
+    "contributors": [
+        {
+            "name": "David Mongeau-Petitpas",
+            "email": "dmp@folklore.email"
+        },
+        {
+            "name": "Nicolas Roy-Bourdages",
+            "email": "nrb@folklore.email"
+        },
+        {
+            "name": "Julien Carignan",
+            "email": "jc@folklore.email"
+        }
+    ],
+    "license": "ISC",
+    "main": "lib/index.js",
+    "module": "es/index.js",
+    "files": [
+        "lib",
+        "es",
+        "assets"
+    ],
+    "scripts": {
+        "prepare": "../../scripts/prepare-package.sh"
+    },
+    "devDependencies": {
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0"
+    },
+    "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@fortawesome/fontawesome-svg-core": "^1.2.32",
+        "@fortawesome/free-solid-svg-icons": "^5.15.1",
+        "@fortawesome/react-fontawesome": "^0.1.13",
+        "@micromag/core": "^0.2.286",
+        "@micromag/data": "^0.2.286",
+        "@micromag/element-background": "^0.2.286",
+        "@micromag/element-button": "^0.2.286",
+        "@micromag/element-call-to-action": "^0.2.286",
+        "@micromag/element-container": "^0.2.286",
+        "@micromag/element-heading": "^0.2.286",
+        "@micromag/element-scroll": "^0.2.286",
+        "@micromag/element-text": "^0.2.286",
+        "@micromag/element-text-input": "^0.2.286",
+        "@micromag/transforms": "^0.2.286",
+        "classnames": "^2.2.6",
+        "lodash": "^4.17.20",
+        "prop-types": "^15.7.2",
+        "react-intl": "^5.12.1",
+        "uuid": "^8.3.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "380a52b4b3f57dc2535014af6241032f09055d40"
+}