@micromag/screen-image 0.2.315 → 0.2.320

package/es/index.js

@@ -26,6 +26,7 @@ var styles = {"container":"micromag-screen-image-container","image":"micromag-sc
 var propTypes = {
   layout: PropTypes.oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
   image: PropTypes$1.imageMedia,
+  imageFit: PropTypes.oneOf(['contain', 'cover']),
   defaultImageFit: PropTypes.string,
   title: PropTypes$1.headingElement,
   text: PropTypes$1.textElement,
@@ -43,6 +44,7 @@ var propTypes = {
 var defaultProps = {
   layout: 'normal',
   image: null,
+  imageFit: null,
   defaultImageFit: 'cover',
   title: null,
   text: null,
@@ -59,10 +61,11 @@ var defaultProps = {
 };
 
 var ImageScreen = function ImageScreen(_ref) {
-  var _ref4;
+  var _ref3;
 
   var layout = _ref.layout,
       image = _ref.image,
+      imageFit = _ref.imageFit,
       defaultImageFit = _ref.defaultImageFit,
       title = _ref.title,
       text = _ref.text,
@@ -76,15 +79,11 @@ var ImageScreen = function ImageScreen(_ref) {
       current = _ref.current,
       transitions = _ref.transitions,
       className = _ref.className;
-
-  var _ref2 = image || {},
-      fit = _ref2.fit;
-
-  var imageFit = useMemo(function () {
+  var finalImageFit = useMemo(function () {
     return {
-      fit: fit || defaultImageFit
+      fit: imageFit || defaultImageFit
     };
-  }, [fit, defaultImageFit]);
+  }, [imageFit, defaultImageFit]);
 
   var _useScreenSize = useScreenSize(),
       width = _useScreenSize.width,
@@ -129,9 +128,9 @@ var ImageScreen = function ImageScreen(_ref) {
       imageCntRef = _useResizeObserver.ref,
       contentRect = _useResizeObserver.entry.contentRect;
 
-  var _ref3 = contentRect || {},
-      imageWidth = _ref3.width,
-      imageHeight = _ref3.height;
+  var _ref2 = contentRect || {},
+      imageWidth = _ref2.width,
+      imageHeight = _ref2.height;
 
   var cardImageMargin = isCardReverse ? "".concat(finalSpacing / 2, "px ").concat(-finalSpacing / 2, "px 0") : "0 ".concat(-finalSpacing / 2, "px ").concat(finalSpacing / 2, "px");
   var imageMargin = isCard || isCardReverse ? cardImageMargin : finalSpacing / 2;
@@ -165,7 +164,7 @@ var ImageScreen = function ImageScreen(_ref) {
   }, /*#__PURE__*/React.createElement(Visual, {
     className: styles.image,
     media: image,
-    objectFit: imageFit,
+    objectFit: finalImageFit,
     width: imageWidth,
     height: imageHeight,
     videoAutoplay: backgroundPlaying,
@@ -270,7 +269,7 @@ var ImageScreen = function ImageScreen(_ref) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles.isReversed, isReversed), _defineProperty(_ref4, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref4, styles.isCard, isCard), _defineProperty(_ref4, styles.isCardReverse, isCardReverse), _defineProperty(_ref4, styles.isFullscreen, isFullscreen), _ref4)]),
+    className: classNames([styles.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles.isReversed, isReversed), _defineProperty(_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref3, styles.isCard, isCard), _defineProperty(_ref3, styles.isCardReverse, isCardReverse), _defineProperty(_ref3, styles.isFullscreen, isFullscreen), _ref3)]),
     "data-screen-ready": ready
   }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, Object.assign({}, background, {
     width: width,
@@ -413,7 +412,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     label: defineMessage({
       "id": "xsipID",
       "defaultMessage": [{
@@ -421,6 +420,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'background',
     type: 'background',
@@ -476,7 +487,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     label: defineMessage({
       "id": "xsipID",
       "defaultMessage": [{
@@ -484,6 +495,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'title',
     type: 'heading-element',
@@ -553,7 +576,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     label: defineMessage({
       "id": "xsipID",
       "defaultMessage": [{
@@ -561,6 +584,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'text',
     type: 'text-element',
@@ -629,7 +664,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     isHorizontal: false,
     label: defineMessage({
       "id": "xsipID",
@@ -638,6 +673,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'title',
     type: 'text-element',
@@ -720,7 +767,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     label: defineMessage({
       "id": "xsipID",
       "defaultMessage": [{
@@ -728,6 +775,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'legend',
     type: 'text-element',

package/lib/index.js

@@ -48,6 +48,7 @@ var styles = {"container":"micromag-screen-image-container","image":"micromag-sc
 var propTypes = {
   layout: PropTypes__default['default'].oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
   image: core.PropTypes.imageMedia,
+  imageFit: PropTypes__default['default'].oneOf(['contain', 'cover']),
   defaultImageFit: PropTypes__default['default'].string,
   title: core.PropTypes.headingElement,
   text: core.PropTypes.textElement,
@@ -65,6 +66,7 @@ var propTypes = {
 var defaultProps = {
   layout: 'normal',
   image: null,
+  imageFit: null,
   defaultImageFit: 'cover',
   title: null,
   text: null,
@@ -81,10 +83,11 @@ var defaultProps = {
 };
 
 var ImageScreen = function ImageScreen(_ref) {
-  var _ref4;
+  var _ref3;
 
   var layout = _ref.layout,
       image = _ref.image,
+      imageFit = _ref.imageFit,
       defaultImageFit = _ref.defaultImageFit,
       title = _ref.title,
       text = _ref.text,
@@ -98,15 +101,11 @@ var ImageScreen = function ImageScreen(_ref) {
       current = _ref.current,
       transitions = _ref.transitions,
       className = _ref.className;
-
-  var _ref2 = image || {},
-      fit = _ref2.fit;
-
-  var imageFit = React.useMemo(function () {
+  var finalImageFit = React.useMemo(function () {
     return {
-      fit: fit || defaultImageFit
+      fit: imageFit || defaultImageFit
     };
-  }, [fit, defaultImageFit]);
+  }, [imageFit, defaultImageFit]);
 
   var _useScreenSize = contexts.useScreenSize(),
       width = _useScreenSize.width,
@@ -151,9 +150,9 @@ var ImageScreen = function ImageScreen(_ref) {
       imageCntRef = _useResizeObserver.ref,
       contentRect = _useResizeObserver.entry.contentRect;
 
-  var _ref3 = contentRect || {},
-      imageWidth = _ref3.width,
-      imageHeight = _ref3.height;
+  var _ref2 = contentRect || {},
+      imageWidth = _ref2.width,
+      imageHeight = _ref2.height;
 
   var cardImageMargin = isCardReverse ? "".concat(finalSpacing / 2, "px ").concat(-finalSpacing / 2, "px 0") : "0 ".concat(-finalSpacing / 2, "px ").concat(finalSpacing / 2, "px");
   var imageMargin = isCard || isCardReverse ? cardImageMargin : finalSpacing / 2;
@@ -187,7 +186,7 @@ var ImageScreen = function ImageScreen(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement(Visual__default['default'], {
     className: styles.image,
     media: image,
-    objectFit: imageFit,
+    objectFit: finalImageFit,
     width: imageWidth,
     height: imageHeight,
     videoAutoplay: backgroundPlaying,
@@ -292,7 +291,7 @@ var ImageScreen = function ImageScreen(_ref) {
   }
 
   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.isReversed, isReversed), _defineProperty__default['default'](_ref4, styles.isPlaceholder, isPlaceholder), _defineProperty__default['default'](_ref4, styles.isCard, isCard), _defineProperty__default['default'](_ref4, styles.isCardReverse, isCardReverse), _defineProperty__default['default'](_ref4, styles.isFullscreen, isFullscreen), _ref4)]),
+    className: classNames__default['default']([styles.container, (_ref3 = {}, _defineProperty__default['default'](_ref3, className, className !== null), _defineProperty__default['default'](_ref3, styles.isReversed, isReversed), _defineProperty__default['default'](_ref3, styles.isPlaceholder, isPlaceholder), _defineProperty__default['default'](_ref3, styles.isCard, isCard), _defineProperty__default['default'](_ref3, styles.isCardReverse, isCardReverse), _defineProperty__default['default'](_ref3, styles.isFullscreen, isFullscreen), _ref3)]),
     "data-screen-ready": ready
   }, !isPlaceholder ? /*#__PURE__*/React__default['default'].createElement(Background__default['default'], Object.assign({}, background, {
     width: width,
@@ -435,7 +434,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     label: reactIntl.defineMessage({
       "id": "xsipID",
       "defaultMessage": [{
@@ -443,6 +442,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: reactIntl.defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'background',
     type: 'background',
@@ -498,7 +509,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     label: reactIntl.defineMessage({
       "id": "xsipID",
       "defaultMessage": [{
@@ -506,6 +517,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: reactIntl.defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'title',
     type: 'heading-element',
@@ -575,7 +598,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     label: reactIntl.defineMessage({
       "id": "xsipID",
       "defaultMessage": [{
@@ -583,6 +606,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: reactIntl.defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'text',
     type: 'text-element',
@@ -651,7 +686,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     isHorizontal: false,
     label: reactIntl.defineMessage({
       "id": "xsipID",
@@ -660,6 +695,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: reactIntl.defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'title',
     type: 'text-element',
@@ -742,7 +789,7 @@ var definition = [{
     })
   }, {
     name: 'image',
-    type: 'visual-with-fit',
+    type: 'visual',
     label: reactIntl.defineMessage({
       "id": "xsipID",
       "defaultMessage": [{
@@ -750,6 +797,18 @@ var definition = [{
         "value": "Image"
       }]
     })
+  }, {
+    name: 'imageFit',
+    type: 'fit',
+    defaultValue: 'cover',
+    values: ['cover', 'contain'],
+    label: reactIntl.defineMessage({
+      "id": "dkBBRa",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Image fit"
+      }]
+    })
   }, {
     name: 'legend',
     type: 'text-element',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image",
-    "version": "0.2.315",
+    "version": "0.2.320",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,15 +49,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.2.315",
-        "@micromag/element-background": "^0.2.315",
-        "@micromag/element-call-to-action": "^0.2.315",
-        "@micromag/element-container": "^0.2.315",
-        "@micromag/element-heading": "^0.2.315",
-        "@micromag/element-layout": "^0.2.315",
-        "@micromag/element-text": "^0.2.315",
-        "@micromag/element-visual": "^0.2.315",
-        "@micromag/transforms": "^0.2.315",
+        "@micromag/core": "^0.2.320",
+        "@micromag/element-background": "^0.2.320",
+        "@micromag/element-call-to-action": "^0.2.320",
+        "@micromag/element-container": "^0.2.320",
+        "@micromag/element-heading": "^0.2.320",
+        "@micromag/element-layout": "^0.2.320",
+        "@micromag/element-text": "^0.2.320",
+        "@micromag/element-visual": "^0.2.320",
+        "@micromag/transforms": "^0.2.320",
         "classnames": "^2.2.6",
         "lodash": "^4.17.20",
         "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a08edd143bdd81de6477f637e08046e0130da237"
+    "gitHead": "e710981101344c5b9dabf805fae6258743337e51"
 }