@micromag/screen-urbania-article 0.3.349 → 0.3.356

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-urbania-article-callToActionContainer,.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-visual,.micromag-screen-urbania-article-content,.micromag-screen-urbania-article-empty,.micromag-screen-urbania-article-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-article-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-article-disabled.micromag-screen-urbania-article-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-hidden.micromag-screen-urbania-article-container{display:none;visibility:hidden}.micromag-screen-urbania-article-placeholder.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content{padding:6px;position:relative}.micromag-screen-urbania-article-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isPlaceholder .micromag-screen-urbania-article-articleContent{background-color:transparent;background-color:#2b2b2b;height:35%;margin:5px auto;width:80%}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isPlaceholder .micromag-screen-urbania-article-visual{-ms-flex-positive:1;flex-grow:1;height:50%;margin:5px auto;position:relative;width:80%}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent{-ms-flex-positive:1;-ms-flex-pack:end;background-color:transparent;flex-grow:1;justify-content:flex-end;margin-bottom:70px;position:relative}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-description,.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-title{color:#fff;text-shadow:0 0 6px #222}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors{margin-top:0}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-emptyContainer{height:100%;padding-bottom:0;top:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-callToAction{position:absolute}.micromag-screen-urbania-article-placeholder{background-color:#6c6c6c}.micromag-screen-urbania-article-emptyContainer{height:0;margin-bottom:10px;padding-bottom:20%;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);width:100%}.micromag-screen-urbania-article-emptyContainer.micromag-screen-urbania-article-small{padding-bottom:15%}.micromag-screen-urbania-article-empty{margin:0}.micromag-screen-urbania-article-background{z-index:1}.micromag-screen-urbania-article-content{height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:2}.micromag-screen-urbania-article-articleContent,.micromag-screen-urbania-article-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%}.micromag-screen-urbania-article-articleContent{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;color:#222;justify-content:center;text-align:center;z-index:3}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-authors,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-description,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-overTitle,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-title{padding:3px 20px}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-overTitle{border-bottom:1px solid;font-family:Agrandir Tight;font-size:10px;font-weight:700;margin-bottom:10px;padding:30px 0 2px;text-transform:uppercase}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-title{font-family:GarageGothic-Bold;line-height:.88;text-transform:uppercase}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-description{padding:6px 20px 12px}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-lede{font-family:Agrandir;line-height:1.1}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-lede p{margin:0}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-authors{margin-bottom:6px}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-authors.micromag-screen-urbania-article-isAboveDescription{margin-bottom:0}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors{background-color:#ff0;color:#222;display:inline-block;letter-spacing:.04em;line-height:.7;margin-top:auto;padding:2px 10px 4px;width:100%}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors p,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors span{line-height:.7}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsor{display:inline;font-family:Agrandir;font-size:9px;font-weight:400;line-height:.7;text-transform:uppercase}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-quatre95{background-color:#fff}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-quatre95 .micromag-screen-urbania-article-author{color:#5e79ff}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-quatre95 .micromag-screen-urbania-article-sponsors,.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-urbania{background-color:#ff0;color:#222}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-urbania .micromag-screen-urbania-article-author{color:#222}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-urbania .micromag-screen-urbania-article-sponsors{background-color:#222;color:#ff0}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-dehors{background-color:#00c693;color:#ffeada}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-dehors .micromag-screen-urbania-article-author{color:#ffeada}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-universities{background-color:#fff;color:#f33}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-universities .micromag-screen-urbania-article-overTitle{color:#222}.micromag-screen-urbania-article-visual{height:100%;z-index:2}.micromag-screen-urbania-article-callToActionContainer{z-index:3}.micromag-screen-urbania-article-callToAction{bottom:0;left:0;padding-bottom:5px;position:absolute;right:0;-webkit-transform:translateZ(0);transform:translateZ(0);vertical-align:middle;z-index:10}.micromag-screen-urbania-article-callToAction .micromag-screen-urbania-article-arrow{margin-bottom:5px;opacity:.95}.micromag-screen-urbania-article-callToAction .micromag-screen-urbania-article-icon{display:inline-block;margin-right:3px;margin-top:-3px;padding:1px}.micromag-screen-urbania-article-mediaControls{padding:10px 20px 20px}.micromag-screen-urbania-article-placeholder{display:block}.micromag-screen-urbania-article-bottom{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.micromag-screen-urbania-article-bottom.micromag-screen-urbania-article-visible{opacity:1}.micromag-screen-urbania-article-bottom.micromag-screen-urbania-article-withGradient{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-urbania-article-image{height:100%!important;position:relative!important;width:100%!important}.micromag-screen-urbania-article-isCurrent .micromag-screen-urbania-article-image{-webkit-animation:micromag-screen-urbania-article-slowZoom 15s ease-out 1 forwards;animation:micromag-screen-urbania-article-slowZoom 15s ease-out 1 forwards}.micromag-screen-urbania-article-img{height:100%!important;left:auto!important;-o-object-fit:cover;object-fit:cover;position:relative!important;top:auto!important;width:100%!important}@-webkit-keyframes micromag-screen-urbania-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes micromag-screen-urbania-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}
+.micromag-screen-urbania-article-callToActionContainer,.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-visual,.micromag-screen-urbania-article-content,.micromag-screen-urbania-article-empty,.micromag-screen-urbania-article-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-article-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-article-disabled.micromag-screen-urbania-article-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-hidden.micromag-screen-urbania-article-container{display:none;visibility:hidden}.micromag-screen-urbania-article-placeholder.micromag-screen-urbania-article-container .micromag-screen-urbania-article-content{padding:6px;position:relative}.micromag-screen-urbania-article-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isPlaceholder .micromag-screen-urbania-article-articleContent{background-color:transparent;background-color:#2b2b2b;height:35%;margin:5px auto;width:80%}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isPlaceholder .micromag-screen-urbania-article-visual{-ms-flex-positive:1;flex-grow:1;height:50%;margin:5px auto;position:relative;width:80%}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent{-ms-flex-positive:1;-ms-flex-pack:end;background-color:transparent;flex-grow:1;justify-content:flex-end;margin-bottom:70px;position:relative}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-description,.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-title{color:#fff;text-shadow:0 0 6px #222}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors{margin-top:0}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-emptyContainer{height:100%;padding-bottom:0;top:0;-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-urbania-article-container.micromag-screen-urbania-article-isVideo .micromag-screen-urbania-article-callToAction{position:absolute}.micromag-screen-urbania-article-placeholder{background-color:#6c6c6c}.micromag-screen-urbania-article-emptyContainer{height:0;margin-bottom:10px;padding-bottom:20%;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);width:100%}.micromag-screen-urbania-article-emptyContainer.micromag-screen-urbania-article-small{padding-bottom:15%}.micromag-screen-urbania-article-empty{margin:0}.micromag-screen-urbania-article-background{z-index:1}.micromag-screen-urbania-article-content{height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:2}.micromag-screen-urbania-article-articleContent,.micromag-screen-urbania-article-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%}.micromag-screen-urbania-article-articleContent{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;color:#222;justify-content:center;text-align:center;z-index:3}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-authors,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-description,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-overTitle,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-title{padding:3px 20px}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-overTitle{border-bottom:1px solid;font-family:Agrandir Tight;font-size:10px;font-weight:700;margin-bottom:10px;padding:30px 0 2px;text-transform:uppercase}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-title{font-family:GarageGothic-Bold;line-height:.88;text-transform:uppercase}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-description{padding:6px 20px 12px}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-lede{font-family:Agrandir;line-height:1.1}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-lede p{margin:0}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-authors{margin-bottom:6px}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-authors.micromag-screen-urbania-article-isAboveDescription{margin-bottom:0}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors{background-color:#ff0;color:#222;display:inline-block;letter-spacing:.04em;line-height:.7;margin-top:auto;padding:2px 10px 4px;width:100%}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors p,.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsors span{line-height:.7}.micromag-screen-urbania-article-articleContent .micromag-screen-urbania-article-sponsor{display:inline;font-family:Agrandir;font-size:9px;font-weight:400;line-height:.7;text-transform:uppercase}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-quatre95{background-color:#fff}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-quatre95 .micromag-screen-urbania-article-author{color:#5e79ff}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-quatre95 .micromag-screen-urbania-article-sponsors,.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-urbania{background-color:#ff0;color:#222}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-urbania .micromag-screen-urbania-article-author{color:#222}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-urbania .micromag-screen-urbania-article-sponsors{background-color:#222;color:#ff0}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-dehors{background-color:#00c693;color:#ffeada}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-dehors .micromag-screen-urbania-article-author{color:#ffeada}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-universities{background-color:#fff;color:#f33}.micromag-screen-urbania-article-articleContent.micromag-screen-urbania-article-universities .micromag-screen-urbania-article-overTitle{color:#222}.micromag-screen-urbania-article-visual{height:100%;z-index:2}.micromag-screen-urbania-article-callToActionContainer{z-index:3}.micromag-screen-urbania-article-callToAction{bottom:0;left:0;padding-bottom:5px;position:absolute;right:0;-webkit-transform:translateZ(0);transform:translateZ(0);vertical-align:middle;z-index:10}.micromag-screen-urbania-article-callToAction .micromag-screen-urbania-article-arrow{margin-bottom:5px;opacity:.95}.micromag-screen-urbania-article-callToAction .micromag-screen-urbania-article-icon{display:inline-block;margin-right:3px;margin-top:-3px;padding:1px}.micromag-screen-urbania-article-mediaControls{padding:10px 20px 20px}.micromag-screen-urbania-article-placeholder{display:block}.micromag-screen-urbania-article-header{left:0;position:absolute;top:0;width:100%;z-index:4}.micromag-screen-urbania-article-bottom{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.micromag-screen-urbania-article-bottom.micromag-screen-urbania-article-visible{opacity:1}.micromag-screen-urbania-article-bottom.micromag-screen-urbania-article-withGradient{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-urbania-article-image{height:100%!important;position:relative!important;width:100%!important}.micromag-screen-urbania-article-isCurrent .micromag-screen-urbania-article-image{-webkit-animation:micromag-screen-urbania-article-slowZoom 15s ease-out 1 forwards;animation:micromag-screen-urbania-article-slowZoom 15s ease-out 1 forwards}.micromag-screen-urbania-article-img{height:100%!important;left:auto!important;-o-object-fit:cover;object-fit:cover;position:relative!important;top:auto!important;width:100%!important}@-webkit-keyframes micromag-screen-urbania-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes micromag-screen-urbania-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}

package/es/index.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { getJSON } from '@folklore/fetch';
 import PropTypes from 'prop-types';
 import React, { useMemo, useState, useEffect } from 'react';
-import { isTextFilled, getStyleFromColor, isValidUrl } from '@micromag/core/utils';
+import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromColor, isValidUrl } from '@micromag/core/utils';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
@@ -13,8 +13,9 @@ import { ScreenElement, PlaceholderSubtitle, Empty, PlaceholderTitle, Placeholde
 import { useScreenSize, useScreenRenderContext, useViewerWebView, useViewerContext, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useDimensionObserver } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
-import CallToAction from '@micromag/element-call-to-action';
 import Container from '@micromag/element-container';
+import Footer from '@micromag/element-footer';
+import Header from '@micromag/element-header';
 import Heading from '@micromag/element-heading';
 import Text from '@micromag/element-text';
 import UrbaniaAuthor from '@micromag/element-urbania-author';
@@ -92,7 +93,7 @@ var WatchIcon = function WatchIcon(_ref) {
 WatchIcon.propTypes = propTypes$2;
 WatchIcon.defaultProps = defaultProps$2;
 
-var styles = {"callToActionContainer":"micromag-screen-urbania-article-callToActionContainer","content":"micromag-screen-urbania-article-content","video":"micromag-screen-urbania-article-video","empty":"micromag-screen-urbania-article-empty","container":"micromag-screen-urbania-article-container","isVideo":"micromag-screen-urbania-article-isVideo","visual":"micromag-screen-urbania-article-visual","disabled":"micromag-screen-urbania-article-disabled","hidden":"micromag-screen-urbania-article-hidden","placeholder":"micromag-screen-urbania-article-placeholder","isPlaceholder":"micromag-screen-urbania-article-isPlaceholder","articleContent":"micromag-screen-urbania-article-articleContent","title":"micromag-screen-urbania-article-title","description":"micromag-screen-urbania-article-description","sponsors":"micromag-screen-urbania-article-sponsors","emptyContainer":"micromag-screen-urbania-article-emptyContainer","callToAction":"micromag-screen-urbania-article-callToAction","small":"micromag-screen-urbania-article-small","background":"micromag-screen-urbania-article-background","overTitle":"micromag-screen-urbania-article-overTitle","authors":"micromag-screen-urbania-article-authors","lede":"micromag-screen-urbania-article-lede","isAboveDescription":"micromag-screen-urbania-article-isAboveDescription","sponsor":"micromag-screen-urbania-article-sponsor","quatre95":"micromag-screen-urbania-article-quatre95","author":"micromag-screen-urbania-article-author","urbania":"micromag-screen-urbania-article-urbania","dehors":"micromag-screen-urbania-article-dehors","universities":"micromag-screen-urbania-article-universities","arrow":"micromag-screen-urbania-article-arrow","icon":"micromag-screen-urbania-article-icon","mediaControls":"micromag-screen-urbania-article-mediaControls","bottom":"micromag-screen-urbania-article-bottom","visible":"micromag-screen-urbania-article-visible","withGradient":"micromag-screen-urbania-article-withGradient","image":"micromag-screen-urbania-article-image","isCurrent":"micromag-screen-urbania-article-isCurrent","slowZoom":"micromag-screen-urbania-article-slowZoom","img":"micromag-screen-urbania-article-img"};
+var styles = {"callToActionContainer":"micromag-screen-urbania-article-callToActionContainer","content":"micromag-screen-urbania-article-content","video":"micromag-screen-urbania-article-video","empty":"micromag-screen-urbania-article-empty","container":"micromag-screen-urbania-article-container","isVideo":"micromag-screen-urbania-article-isVideo","visual":"micromag-screen-urbania-article-visual","disabled":"micromag-screen-urbania-article-disabled","hidden":"micromag-screen-urbania-article-hidden","placeholder":"micromag-screen-urbania-article-placeholder","isPlaceholder":"micromag-screen-urbania-article-isPlaceholder","articleContent":"micromag-screen-urbania-article-articleContent","title":"micromag-screen-urbania-article-title","description":"micromag-screen-urbania-article-description","sponsors":"micromag-screen-urbania-article-sponsors","emptyContainer":"micromag-screen-urbania-article-emptyContainer","callToAction":"micromag-screen-urbania-article-callToAction","small":"micromag-screen-urbania-article-small","background":"micromag-screen-urbania-article-background","overTitle":"micromag-screen-urbania-article-overTitle","authors":"micromag-screen-urbania-article-authors","lede":"micromag-screen-urbania-article-lede","isAboveDescription":"micromag-screen-urbania-article-isAboveDescription","sponsor":"micromag-screen-urbania-article-sponsor","quatre95":"micromag-screen-urbania-article-quatre95","author":"micromag-screen-urbania-article-author","urbania":"micromag-screen-urbania-article-urbania","dehors":"micromag-screen-urbania-article-dehors","universities":"micromag-screen-urbania-article-universities","arrow":"micromag-screen-urbania-article-arrow","icon":"micromag-screen-urbania-article-icon","mediaControls":"micromag-screen-urbania-article-mediaControls","header":"micromag-screen-urbania-article-header","bottom":"micromag-screen-urbania-article-bottom","visible":"micromag-screen-urbania-article-visible","withGradient":"micromag-screen-urbania-article-withGradient","image":"micromag-screen-urbania-article-image","isCurrent":"micromag-screen-urbania-article-isCurrent","slowZoom":"micromag-screen-urbania-article-slowZoom","img":"micromag-screen-urbania-article-img"};
 
 var propTypes$1 = {
   hasArticle: PropTypes.bool,
@@ -106,8 +107,9 @@ var propTypes$1 = {
   sponsorPrefix: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   sponsorColor: PropTypes$1.color,
   site: PropTypes.string,
+  header: PropTypes$1.header,
+  footer: PropTypes$1.footer,
   background: PropTypes$1.backgroundElement,
-  callToAction: PropTypes$1.callToAction,
   current: PropTypes.bool,
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
@@ -126,8 +128,9 @@ var defaultProps$1 = {
   sponsorPrefix: null,
   sponsorColor: null,
   site: null,
+  header: null,
+  footer: null,
   background: null,
-  callToAction: null,
   current: true,
   active: true,
   transitions: null,
@@ -147,8 +150,9 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     sponsorPrefix = _ref.sponsorPrefix,
     sponsorColor = _ref.sponsorColor,
     site = _ref.site,
+    header = _ref.header,
+    footer = _ref.footer,
     background = _ref.background,
-    callToAction = _ref.callToAction,
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
@@ -210,7 +214,14 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     _ref5$type = _ref5.type,
     imageType = _ref5$type === void 0 ? null : _ref5$type;
   var hasImage = url !== null;
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  var hasHeader = isHeaderFilled(header);
+  var hasFooter = isFooterFilled(footer);
+  var footerProps = getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
   var _ref6 = background || {},
     _ref6$video = _ref6.video,
     backgroundVideo = _ref6$video === void 0 ? null : _ref6$video;
@@ -343,7 +354,13 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     className: styles.content,
     width: width,
     height: height
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
+    key: "header",
+    className: styles.header,
+    style: {
+      paddingTop: spacing
+    }
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.articleContent, _defineProperty({}, styles["".concat(site)], site !== null)]),
     style: _objectSpread({
       paddingTop: spacing,
@@ -397,15 +414,15 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     autoPlay: true
   }) : null)), /*#__PURE__*/React.createElement("div", {
     className: styles.callToActionContainer
-  }, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+  }, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+    key: "call-to-action",
     style: {
       paddingTop: spacing,
       paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
       paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
     },
-    key: "call-to-action"
-  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
-    className: styles.callToAction,
+    className: styles.callToAction
+  }, /*#__PURE__*/React.createElement(Footer, Object.assign({}, footerProps, {
     buttonClassName: styles.button,
     labelClassName: styles.label,
     arrowClassName: styles.arrow,
@@ -739,17 +756,25 @@ var definition = {
       }]
     })
   }, {
-    name: 'callToAction',
-    type: 'call-to-action',
-    theme: {
-      boxStyle: 'cta',
-      label: {
-        textStyle: 'cta'
-      }
-    }
+    name: 'header',
+    type: 'header',
+    label: defineMessage({
+      id: "rhuDxI",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Header"
+      }]
+    })
   }, {
-    name: 'shareIncentive',
-    type: 'share-incentive'
+    name: 'footer',
+    type: 'footer',
+    label: defineMessage({
+      id: "g4nybp",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Footer"
+      }]
+    })
   }]
 };
 

package/lib/index.js

@@ -17,8 +17,9 @@ var components = require('@micromag/core/components');
 var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
 var Background = require('@micromag/element-background');
-var CallToAction = require('@micromag/element-call-to-action');
 var Container = require('@micromag/element-container');
+var Footer = require('@micromag/element-footer');
+var Header = require('@micromag/element-header');
 var Heading = require('@micromag/element-heading');
 var Text = require('@micromag/element-text');
 var UrbaniaAuthor = require('@micromag/element-urbania-author');
@@ -34,8 +35,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
-var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
+var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
 var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var UrbaniaAuthor__default = /*#__PURE__*/_interopDefaultLegacy(UrbaniaAuthor);
@@ -113,7 +115,7 @@ var WatchIcon = function WatchIcon(_ref) {
 WatchIcon.propTypes = propTypes$2;
 WatchIcon.defaultProps = defaultProps$2;
 
-var styles = {"callToActionContainer":"micromag-screen-urbania-article-callToActionContainer","content":"micromag-screen-urbania-article-content","video":"micromag-screen-urbania-article-video","empty":"micromag-screen-urbania-article-empty","container":"micromag-screen-urbania-article-container","isVideo":"micromag-screen-urbania-article-isVideo","visual":"micromag-screen-urbania-article-visual","disabled":"micromag-screen-urbania-article-disabled","hidden":"micromag-screen-urbania-article-hidden","placeholder":"micromag-screen-urbania-article-placeholder","isPlaceholder":"micromag-screen-urbania-article-isPlaceholder","articleContent":"micromag-screen-urbania-article-articleContent","title":"micromag-screen-urbania-article-title","description":"micromag-screen-urbania-article-description","sponsors":"micromag-screen-urbania-article-sponsors","emptyContainer":"micromag-screen-urbania-article-emptyContainer","callToAction":"micromag-screen-urbania-article-callToAction","small":"micromag-screen-urbania-article-small","background":"micromag-screen-urbania-article-background","overTitle":"micromag-screen-urbania-article-overTitle","authors":"micromag-screen-urbania-article-authors","lede":"micromag-screen-urbania-article-lede","isAboveDescription":"micromag-screen-urbania-article-isAboveDescription","sponsor":"micromag-screen-urbania-article-sponsor","quatre95":"micromag-screen-urbania-article-quatre95","author":"micromag-screen-urbania-article-author","urbania":"micromag-screen-urbania-article-urbania","dehors":"micromag-screen-urbania-article-dehors","universities":"micromag-screen-urbania-article-universities","arrow":"micromag-screen-urbania-article-arrow","icon":"micromag-screen-urbania-article-icon","mediaControls":"micromag-screen-urbania-article-mediaControls","bottom":"micromag-screen-urbania-article-bottom","visible":"micromag-screen-urbania-article-visible","withGradient":"micromag-screen-urbania-article-withGradient","image":"micromag-screen-urbania-article-image","isCurrent":"micromag-screen-urbania-article-isCurrent","slowZoom":"micromag-screen-urbania-article-slowZoom","img":"micromag-screen-urbania-article-img"};
+var styles = {"callToActionContainer":"micromag-screen-urbania-article-callToActionContainer","content":"micromag-screen-urbania-article-content","video":"micromag-screen-urbania-article-video","empty":"micromag-screen-urbania-article-empty","container":"micromag-screen-urbania-article-container","isVideo":"micromag-screen-urbania-article-isVideo","visual":"micromag-screen-urbania-article-visual","disabled":"micromag-screen-urbania-article-disabled","hidden":"micromag-screen-urbania-article-hidden","placeholder":"micromag-screen-urbania-article-placeholder","isPlaceholder":"micromag-screen-urbania-article-isPlaceholder","articleContent":"micromag-screen-urbania-article-articleContent","title":"micromag-screen-urbania-article-title","description":"micromag-screen-urbania-article-description","sponsors":"micromag-screen-urbania-article-sponsors","emptyContainer":"micromag-screen-urbania-article-emptyContainer","callToAction":"micromag-screen-urbania-article-callToAction","small":"micromag-screen-urbania-article-small","background":"micromag-screen-urbania-article-background","overTitle":"micromag-screen-urbania-article-overTitle","authors":"micromag-screen-urbania-article-authors","lede":"micromag-screen-urbania-article-lede","isAboveDescription":"micromag-screen-urbania-article-isAboveDescription","sponsor":"micromag-screen-urbania-article-sponsor","quatre95":"micromag-screen-urbania-article-quatre95","author":"micromag-screen-urbania-article-author","urbania":"micromag-screen-urbania-article-urbania","dehors":"micromag-screen-urbania-article-dehors","universities":"micromag-screen-urbania-article-universities","arrow":"micromag-screen-urbania-article-arrow","icon":"micromag-screen-urbania-article-icon","mediaControls":"micromag-screen-urbania-article-mediaControls","header":"micromag-screen-urbania-article-header","bottom":"micromag-screen-urbania-article-bottom","visible":"micromag-screen-urbania-article-visible","withGradient":"micromag-screen-urbania-article-withGradient","image":"micromag-screen-urbania-article-image","isCurrent":"micromag-screen-urbania-article-isCurrent","slowZoom":"micromag-screen-urbania-article-slowZoom","img":"micromag-screen-urbania-article-img"};
 
 var propTypes$1 = {
   hasArticle: PropTypes__default["default"].bool,
@@ -127,8 +129,9 @@ var propTypes$1 = {
   sponsorPrefix: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
   sponsorColor: core.PropTypes.color,
   site: PropTypes__default["default"].string,
+  header: core.PropTypes.header,
+  footer: core.PropTypes.footer,
   background: core.PropTypes.backgroundElement,
-  callToAction: core.PropTypes.callToAction,
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
@@ -147,8 +150,9 @@ var defaultProps$1 = {
   sponsorPrefix: null,
   sponsorColor: null,
   site: null,
+  header: null,
+  footer: null,
   background: null,
-  callToAction: null,
   current: true,
   active: true,
   transitions: null,
@@ -168,8 +172,9 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     sponsorPrefix = _ref.sponsorPrefix,
     sponsorColor = _ref.sponsorColor,
     site = _ref.site,
+    header = _ref.header,
+    footer = _ref.footer,
     background = _ref.background,
-    callToAction = _ref.callToAction,
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
@@ -231,7 +236,14 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     _ref5$type = _ref5.type,
     imageType = _ref5$type === void 0 ? null : _ref5$type;
   var hasImage = url !== null;
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  var hasHeader = utils.isHeaderFilled(header);
+  var hasFooter = utils.isFooterFilled(footer);
+  var footerProps = utils.getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
   var _ref6 = background || {},
     _ref6$video = _ref6.video,
     backgroundVideo = _ref6$video === void 0 ? null : _ref6$video;
@@ -364,7 +376,13 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     className: styles.content,
     width: width,
     height: height
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "header",
+    className: styles.header,
+    style: {
+      paddingTop: spacing
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.articleContent, _defineProperty__default["default"]({}, styles["".concat(site)], site !== null)]),
     style: _objectSpread__default["default"]({
       paddingTop: spacing,
@@ -418,15 +436,15 @@ var UrbaniaArticle = function UrbaniaArticle(_ref) {
     autoPlay: true
   }) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.callToActionContainer
-  }, !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "call-to-action",
     style: {
       paddingTop: spacing,
       paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
       paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
     },
-    key: "call-to-action"
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
-    className: styles.callToAction,
+    className: styles.callToAction
+  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], Object.assign({}, footerProps, {
     buttonClassName: styles.button,
     labelClassName: styles.label,
     arrowClassName: styles.arrow,
@@ -760,17 +778,25 @@ var definition = {
       }]
     })
   }, {
-    name: 'callToAction',
-    type: 'call-to-action',
-    theme: {
-      boxStyle: 'cta',
-      label: {
-        textStyle: 'cta'
-      }
-    }
+    name: 'header',
+    type: 'header',
+    label: reactIntl.defineMessage({
+      id: "rhuDxI",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Header"
+      }]
+    })
   }, {
-    name: 'shareIncentive',
-    type: 'share-incentive'
+    name: 'footer',
+    type: 'footer',
+    label: reactIntl.defineMessage({
+      id: "g4nybp",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Footer"
+      }]
+    })
   }]
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-article",
-    "version": "0.3.349",
+    "version": "0.3.356",
     "description": "",
     "keywords": [
         "javascript"
@@ -51,19 +51,19 @@
         "@babel/runtime": "^7.13.10",
         "@folklore/fetch": "^0.1.15",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.348",
-        "@micromag/element-background": "^0.3.348",
-        "@micromag/element-call-to-action": "^0.3.348",
-        "@micromag/element-closed-captions": "^0.3.348",
-        "@micromag/element-container": "^0.3.348",
-        "@micromag/element-heading": "^0.3.348",
-        "@micromag/element-image": "^0.3.348",
-        "@micromag/element-media-controls": "^0.3.348",
-        "@micromag/element-text": "^0.3.348",
-        "@micromag/element-urbania-author": "^0.3.348",
-        "@micromag/element-video": "^0.3.348",
-        "@micromag/element-visual": "^0.3.348",
-        "@micromag/transforms": "^0.3.348",
+        "@micromag/core": "^0.3.354",
+        "@micromag/element-background": "^0.3.354",
+        "@micromag/element-closed-captions": "^0.3.354",
+        "@micromag/element-container": "^0.3.354",
+        "@micromag/element-footer": "^0.3.354",
+        "@micromag/element-header": "^0.3.356",
+        "@micromag/element-heading": "^0.3.354",
+        "@micromag/element-image": "^0.3.354",
+        "@micromag/element-text": "^0.3.354",
+        "@micromag/element-urbania-author": "^0.3.354",
+        "@micromag/element-video": "^0.3.354",
+        "@micromag/element-visual": "^0.3.354",
+        "@micromag/transforms": "^0.3.354",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5e3c2c33b7e3c1833b1c43f97792b11d746864b1"
+    "gitHead": "683c410d9fc568658e5907fb0a8fa470cb04f6eb"
 }