luna-one 3.1.288 → 3.1.292

package/dist/index.js

@@ -317,6 +317,12 @@ Object.defineProperty(exports, "OverlayNotice", {
     return _OverlayNotice.default;
   }
 });
+Object.defineProperty(exports, "UnboundedCard", {
+  enumerable: true,
+  get: function get() {
+    return _UnboundedCard.default;
+  }
+});
 Object.defineProperty(exports, "VideoComponent", {
   enumerable: true,
   get: function get() {
@@ -590,6 +596,8 @@ var _HTMLEmbed = _interopRequireDefault(require("./luna/components/HTMLEmbed/HTM
 
 var _OverlayNotice = _interopRequireDefault(require("./luna/components/OverlayNotice/OverlayNotice"));
 
+var _UnboundedCard = _interopRequireDefault(require("./luna/components/UnboundedCard/UnboundedCard"));
+
 var _Video = _interopRequireDefault(require("./luna/components/Video/Video"));
 
 var _FooterHandler = _interopRequireDefault(require("./application/components/FooterHandler/FooterHandler"));

package/dist/luna/components/BlockListItems/BlockListItems.scss

@@ -9,8 +9,12 @@
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 24px;
   }
-
+  
   @media screen and (max-width: $breakpoint-sm) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (max-width: $breakpoint-xs) {
     grid-template-columns: repeat(1, 1fr);
     grid-gap: 20px;
   }

package/dist/luna/components/BlockListItems/BlockListItemsMethods.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _BoundedCards = _interopRequireDefault(require("./BoundedCards"));
 
+var _UnboundedCards = _interopRequireDefault(require("./UnboundedCards"));
+
 var _IconMiniBlocks = _interopRequireDefault(require("./IconMiniBlocks"));
 
 var _IconListItemBlocks = _interopRequireDefault(require("./IconListItemBlocks"));
@@ -25,6 +27,12 @@ var renderBlockListItems = function renderBlockListItems(content, motion, type)
         motion: motion
       });
 
+    case "unbounded_cards":
+      return /*#__PURE__*/_react.default.createElement(_UnboundedCards.default, {
+        content: content,
+        motion: motion
+      });
+
     case "icon_mini_blocks":
       return /*#__PURE__*/_react.default.createElement(_IconMiniBlocks.default, {
         content: content,

package/dist/luna/components/BlockListItems/UnboundedCards.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _UnboundedCard = require("../UnboundedCard/UnboundedCard");
+
+require("./BlockListItems.scss");
+
+var imageSizes = {
+  thumbnail: {
+    desktop: {
+      width: 275,
+      height: 180,
+      ratio: {
+        width: 55,
+        height: 36
+      }
+    },
+    tablet: {
+      width: 395,
+      height: 254,
+      ratio: {
+        width: 14,
+        height: 9
+      }
+    },
+    mobile: {
+      width: 600,
+      height: 386,
+      ratio: {
+        width: 14,
+        height: 9
+      }
+    }
+  },
+  modal: {
+    desktop: {
+      width: 1120,
+      height: 630,
+      ratio: {
+        width: 16,
+        height: 9
+      }
+    },
+    tablet: {
+      width: 840,
+      height: 475,
+      ratio: {
+        width: 168,
+        height: 95
+      }
+    },
+    mobile: {
+      width: 280,
+      height: 158,
+      ratio: {
+        width: 140,
+        height: 79
+      }
+    }
+  }
+};
+
+var UnboundedCards = function UnboundedCards(_ref) {
+  var content = _ref.content,
+      motion = _ref.motion;
+  var GatsbyImage = content === null || content === void 0 ? void 0 : content.GatsbyImage;
+  var Link = content === null || content === void 0 ? void 0 : content.Link;
+
+  var renderUnboundedCards = function renderUnboundedCards() {
+    var _content$cards;
+
+    if ((content === null || content === void 0 ? void 0 : content.cards) && (content === null || content === void 0 ? void 0 : (_content$cards = content.cards) === null || _content$cards === void 0 ? void 0 : _content$cards.length)) {
+      return content.cards.map(function (card, index) {
+        var cardContent = {
+          eyebrow: card === null || card === void 0 ? void 0 : card.eyebrow,
+          header: card === null || card === void 0 ? void 0 : card.header,
+          image: card === null || card === void 0 ? void 0 : card.image,
+          imageSizes: imageSizes,
+          displayButton: content === null || content === void 0 ? void 0 : content.displayButton,
+          cardLink: card === null || card === void 0 ? void 0 : card.cardLink,
+          text: card === null || card === void 0 ? void 0 : card.text,
+          GatsbyImage: GatsbyImage,
+          Link: Link,
+          cardAlignment: content === null || content === void 0 ? void 0 : content.cardAlignment,
+          buttonSecondary: content === null || content === void 0 ? void 0 : content.buttonSecondary,
+          modalType: card === null || card === void 0 ? void 0 : card.modalType,
+          modalContent: card === null || card === void 0 ? void 0 : card.modalContent
+        };
+        return /*#__PURE__*/_react.default.createElement(_UnboundedCard.UnboundedCard, {
+          key: index,
+          content: cardContent,
+          motion: motion ? motion : null
+        });
+      });
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("section", {
+    className: "ter-bounded-cards"
+  }, renderUnboundedCards());
+};
+
+var _default = UnboundedCards;
+exports.default = _default;

package/dist/luna/components/UnboundedCard/CardLinkIcon.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardLinkIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var CardLinkIcon = function CardLinkIcon(_ref) {
+  var iconClass = _ref.iconClass,
+      external = _ref.external;
+
+  if (external) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(iconClass, " external-arrow")
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M18.9814 5.56388C18.9326 5.44487 18.8599 5.33338 18.7633 5.23674C18.568 5.04147 18.3121 4.94384 18.0562 4.94384C18.0561 4.94384 18.056 4.94384 18.056 4.94384H8.2149C7.66261 4.94384 7.2149 5.39156 7.2149 5.94384C7.2149 6.49613 7.66261 6.94384 8.2149 6.94384H15.6419L5.23673 17.3491C4.84621 17.7396 4.84621 18.3727 5.23673 18.7633C5.62726 19.1538 6.26042 19.1538 6.65095 18.7633L17.0562 8.35806V15.7851C17.0562 16.3374 17.5039 16.7851 18.0562 16.7851C18.6084 16.7851 19.0562 16.3374 19.0562 15.7851V5.94634C19.0562 5.93828 19.0561 5.93022 19.0559 5.92216C19.0532 5.79554 19.027 5.67471 18.9814 5.56388Z",
+      fill: "#252A2E"
+    })));
+  } else {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: iconClass
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 21 20"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      d: "M10.5 9V6l4 4-4 4v-3h-4V9h4zm0-9c5.52 0 10 4.48 10 10s-4.48 10-10 10-10-4.48-10-10 4.48-10 10-10zm0 18c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8z",
+      fill: "currentColor"
+    })));
+  }
+};
+
+exports.CardLinkIcon = CardLinkIcon;

package/dist/luna/components/UnboundedCard/UnboundedCard.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnboundedCard = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./UnboundedCard.scss");
+
+var _reactAwesomeReveal = require("react-awesome-reveal");
+
+var _checkForDangerouslySet = require("../../utils/checkForDangerouslySet");
+
+var _CardLinkIcon = require("./CardLinkIcon");
+
+var _UnboundedCardMethods = require("./UnboundedCardMethods");
+
+var _useVideo2 = require("../../utils/hooks/useVideo");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var UnboundedCard = function UnboundedCard(_ref) {
+  var _ref$content = _ref.content,
+      content = _ref$content === void 0 ? {} : _ref$content,
+      motion = _ref.motion;
+  var image = content.image,
+      imageSizes = content.imageSizes,
+      eyebrow = content.eyebrow,
+      header = content.header,
+      text = content.text,
+      Link = content.Link,
+      cardAlignment = content.cardAlignment,
+      displayButton = content.displayButton,
+      buttonSecondary = content.buttonSecondary,
+      cardLink = content.cardLink,
+      modalContent = content.modalContent,
+      modalType = content.modalType;
+
+  var _useVideo = (0, _useVideo2.useVideo)(false, false, false),
+      modalDeployed = _useVideo.modalDeployed,
+      deployModal = _useVideo.deployModal,
+      hideModal = _useVideo.hideModal;
+
+  if (buttonSecondary) {
+    cardLink.type = "ter-button--primary--2";
+  }
+
+  var componentBody = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _UnboundedCardMethods.renderCardImage)(image === null || image === void 0 ? void 0 : image.focalPointImage, imageSizes, modalContent, modalType, deployModal, hideModal, modalDeployed), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ter-bounded-card__body"
+  }, eyebrow && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ter-bounded-card__eyebrow"
+  }, eyebrow), header && /*#__PURE__*/_react.default.createElement("h4", {
+    className: "ter-bounded-card__header"
+  }, header), text && (0, _checkForDangerouslySet.checkAndSet)(text, "ter-bounded-card"), cardLink && displayButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ter-bounded-card__link-holder"
+  }, (0, _UnboundedCardMethods.renderButton)(cardLink, Link)), cardLink && !displayButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: "ter-bounded-card__link-holder"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    target: (cardLink === null || cardLink === void 0 ? void 0 : cardLink.external) === false ? "_self" : "_blank",
+    className: "ter-bounded-card__link",
+    href: cardLink === null || cardLink === void 0 ? void 0 : cardLink.url,
+    rel: "noreferrer noopener"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "ter-bounded-card__link-text"
+  }, cardLink === null || cardLink === void 0 ? void 0 : cardLink.text), /*#__PURE__*/_react.default.createElement(_CardLinkIcon.CardLinkIcon, {
+    iconClass: "ter-bounded-card__link-icon",
+    external: cardLink === null || cardLink === void 0 ? void 0 : cardLink.external
+  })))));
+
+  if (motion) {
+    return /*#__PURE__*/_react.default.createElement(_reactAwesomeReveal.Fade, {
+      direction: "up",
+      delay: 200,
+      triggerOnce: true,
+      cascade: true,
+      className: "ter-bounded-card ter-bounded-card--unbounded \n          ".concat(cardAlignment ? "ter-bounded-card--reverse" : "", " \n          ").concat(displayButton ? "ter-bounded-card--with-button" : "", " \n          ")
+    }, componentBody);
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ter-bounded-card ter-bounded-card--unbounded \n      ".concat(cardAlignment ? "ter-bounded-card--reverse" : "", " \n      ").concat(displayButton ? "ter-bounded-card--with-button" : "", " \n      ")
+  }, componentBody);
+};
+
+exports.UnboundedCard = UnboundedCard;

package/dist/luna/components/UnboundedCard/UnboundedCard.scss

@@ -0,0 +1,76 @@
+@import "../../../global-styles/terra.scss";
+
+.ter-bounded-card.ter-bounded-card--unbounded {
+  box-shadow: none;
+  background-color: transparent;
+  .ter-bounded-card__text {
+    flex-grow: 0;
+  }
+}
+
+.ter-unbounded-card__image--with-modal {
+  position: relative;
+  &:hover .ter-unbounded-card__play-button {
+    transform: translateX(-50%) translateY(-50%) scale(1.2);
+    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.2);
+  }
+  & > .ter-focused-image-container {
+    cursor: pointer;
+  }
+}
+
+.ter-unbounded-card__play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 60px;
+}
+
+.ter-unbounded-card-modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 100;
+  transition: 0.3s;
+  animation: fade-in 0.5s linear;
+  height: 100%;
+  width: 100%;
+  opacity:0;
+  background: rgba(0, 0, 0, 0.7);
+  visibility: hidden;
+  pointer-events: none;
+  &--deployed {
+    visibility: visible;
+    pointer-events: none;
+    opacity: 1;
+    transform: translateY(0);
+  }
+  &__close-wrapper {
+    height: 70px;
+    display: flex;
+    justify-content: flex-end;
+    pointer-events: auto;
+    cursor: pointer;
+  }
+  &__close-button {
+    margin: 20px 50px 12px 50px;
+    display: inline-block;
+  }
+}
+
+.ter-unbounded-card-modal--deployed .ter-focused-image-container {
+  max-width: 1120px;
+  max-height: 675px;
+  margin: 0 auto;
+}
+
+.video-modal-deployed .ter-bounded-cards {
+  // solves some strange behavior where the background cards were clickable while modal deployed
+  pointer-events: none;
+  .luna-super-hero__modal {
+    pointer-events: auto;
+  }
+}

package/dist/luna/components/UnboundedCard/UnboundedCardMethods.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderButton = exports.renderCardImage = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _terraOne = _interopRequireWildcard(require("terra-one"));
+
+var _Video = _interopRequireDefault(require("../Video/Video"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var renderCardImage = function renderCardImage(image, imageSizes, modalContent, modalType, deployModal, hideModal, modalDeployed) {
+  if (image && (modalContent === null || modalContent === void 0 ? void 0 : modalContent.video) && modalType && modalType !== "No Modal") {
+    return /*#__PURE__*/_react.default.createElement("figure", {
+      className: "ter-bounded-card__image ter-unbounded-card__image--with-modal"
+    }, /*#__PURE__*/_react.default.createElement(_Video.default, {
+      content: modalContent
+    }));
+  } else if (image && imageSizes && modalType && modalType !== "No Modal") {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("figure", {
+      className: "ter-bounded-card__image ter-unbounded-card__image--with-modal",
+      onClick: function onClick() {
+        return deployModal();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_terraOne.FocusedImage, {
+      focalPointImage: image,
+      alt: image === null || image === void 0 ? void 0 : image.title,
+      fullHeightWrapper: true,
+      imageSizes: imageSizes.thumbnail
+    })), renderModal(modalType, imageSizes, image, modalDeployed, hideModal));
+  } else {
+    return /*#__PURE__*/_react.default.createElement("figure", {
+      className: "ter-bounded-card__image"
+    }, /*#__PURE__*/_react.default.createElement(_terraOne.FocusedImage, {
+      focalPointImage: image && image,
+      alt: image === null || image === void 0 ? void 0 : image.title,
+      fullHeightWrapper: true,
+      imageSizes: imageSizes.thumbnail
+    }));
+  }
+};
+
+exports.renderCardImage = renderCardImage;
+
+var renderModal = function renderModal(modalType, imageSizes, modalContent, modalDeployed, hideModal) {
+  if (modalType === "Image") {
+    return modalDeployed && /*#__PURE__*/_react.default.createElement("div", {
+      className: "ter-unbounded-card-modal ".concat(modalDeployed ? "ter-unbounded-card-modal--deployed" : "")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "ter-unbounded-card-modal__close-wrapper",
+      onClick: function onClick() {
+        hideModal();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_terraOne.Icon, {
+      color: "#ffffff",
+      type: "ter-icon--open-x-dark-48px",
+      size: "32px",
+      className: "ter-unbounded-card-modal__close-button"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "default-layout"
+    }, /*#__PURE__*/_react.default.createElement(_terraOne.FocusedImage, {
+      focalPointImage: modalContent,
+      alt: modalContent === null || modalContent === void 0 ? void 0 : modalContent.title,
+      fullHeightWrapper: true,
+      imageSizes: imageSizes.modal
+    })));
+  }
+};
+
+var renderButton = function renderButton(buttonContent, Link) {
+  return /*#__PURE__*/_react.default.createElement(_terraOne.default, {
+    name: (buttonContent === null || buttonContent === void 0 ? void 0 : buttonContent.name) || null,
+    text: (buttonContent === null || buttonContent === void 0 ? void 0 : buttonContent.text) || null,
+    className: (buttonContent === null || buttonContent === void 0 ? void 0 : buttonContent.type) || "ter-button--primary--1",
+    onClick: (buttonContent === null || buttonContent === void 0 ? void 0 : buttonContent.onClick) || null,
+    url: (buttonContent === null || buttonContent === void 0 ? void 0 : buttonContent.url) || null,
+    external: (buttonContent === null || buttonContent === void 0 ? void 0 : buttonContent.external) || false,
+    Link: Link
+  });
+};
+
+exports.renderButton = renderButton;

package/dist/luna/components/UnboundedCard/playIcon.svg

@@ -0,0 +1,17 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<circle cx="44" cy="42" r="36" fill="white"/>
+<path d="M58.0834 41.0402L37.8366 28.6668C37.6661 28.5626 37.4709 28.5057 37.2711 28.502C37.0712 28.4982 36.874 28.5478 36.6997 28.6455C36.5254 28.7433 36.3803 28.8857 36.2793 29.0582C36.1782 29.2307 36.125 29.4269 36.125 29.6268V54.3736C36.125 54.5734 36.1782 54.7697 36.2793 54.9421C36.3803 55.1146 36.5254 55.257 36.6997 55.3548C36.874 55.4526 37.0712 55.5021 37.2711 55.4984C37.4709 55.4946 37.6661 55.4377 37.8366 55.3335L58.0834 42.9601C58.2478 42.8596 58.3837 42.7186 58.4779 42.5505C58.5722 42.3824 58.6217 42.1929 58.6217 42.0002C58.6217 41.8075 58.5722 41.618 58.4779 41.4499C58.3837 41.2818 58.2478 41.1407 58.0834 41.0402Z" fill="#4DA2D3"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="88" height="88" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="4"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.19 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

package/dist/luna/components/Video/Video.js

@@ -336,6 +336,32 @@ var imageSizes = {
         height: 2
       }
     }
+  },
+  unbounded_cards: {
+    desktop: {
+      width: 275,
+      height: 180,
+      ratio: {
+        width: 55,
+        height: 36
+      }
+    },
+    tablet: {
+      width: 275,
+      height: 180,
+      ratio: {
+        width: 55,
+        height: 36
+      }
+    },
+    mobile: {
+      width: 275,
+      height: 180,
+      ratio: {
+        width: 55,
+        height: 36
+      }
+    }
   }
 };
 exports.imageSizes = imageSizes;
@@ -357,7 +383,7 @@ var renderVideo = function renderVideo(video, thumbnail, hovering, modalDeployed
       }
     }, /*#__PURE__*/_react.default.createElement(_terraOne.Icon, {
       color: "#ffffff",
-      type: "open-x-dark-48px",
+      type: "ter-icon--open-x-dark-48px",
       size: "32px",
       className: "luna-super-hero__close-button"
     })), /*#__PURE__*/_react.default.createElement("div", {

package/dist/luna/heroes/FullBackgroundHero/FullBackgroundHero.js

@@ -22,8 +22,6 @@ var _useStyles2 = _interopRequireDefault(require("../../utils/hooks/useStyles"))
 var _reactAwesomeReveal = require("react-awesome-reveal");
 
 var FullBackgroundHero = function FullBackgroundHero(_ref) {
-  var _rightContent$type;
-
   var content = _ref.content,
       theme = _ref.theme,
       motion = _ref.motion,
@@ -38,7 +36,8 @@ var FullBackgroundHero = function FullBackgroundHero(_ref) {
       _content$shapeType = content.shapeType,
       shapeType = _content$shapeType === void 0 ? 'square' : _content$shapeType,
       _content$shapeBorderC = content.shapeBorderColor,
-      shapeBorderColor = _content$shapeBorderC === void 0 ? '#F1F1F6' : _content$shapeBorderC;
+      shapeBorderColor = _content$shapeBorderC === void 0 ? '#F1F1F6' : _content$shapeBorderC,
+      rightContentType = content.rightContentType;
 
   var _useWindowSize = (0, _useWindowSize2.default)(),
       size = _useWindowSize.size;
@@ -48,8 +47,14 @@ var FullBackgroundHero = function FullBackgroundHero(_ref) {
   var _useStyles = (0, _useStyles2.default)(themes),
       backgroundColor = _useStyles.backgroundColor;
 
+  var twoByTwoModifier = "";
+
+  if (rightContentType) {
+    twoByTwoModifier = rightContentType === 'Contentful2X2' ? 'luna-full-background-hero--2x2' : "";
+  }
+
   return /*#__PURE__*/_react.default.createElement("section", {
-    className: "\n        luna-full-background-hero \n        luna-full-background-hero-".concat(variant, " ").concat(paddingClass, " \n        ").concat((rightContent === null || rightContent === void 0 ? void 0 : (_rightContent$type = rightContent.type) === null || _rightContent$type === void 0 ? void 0 : _rightContent$type.name) === 'TwoByTwoContent' ? 'luna-full-background-hero--2x2' : '', "\n      "),
+    className: "\n        luna-full-background-hero \n        luna-full-background-hero-".concat(variant, " ").concat(paddingClass, " \n        ").concat(twoByTwoModifier, "\n      "),
     style: {
       background: backgroundColor
     }

package/dist/luna/heroes/FullBackgroundHero/FullBackgroundHero.scss

@@ -16,8 +16,8 @@
     min-height: 100vh;
 
     @media screen and (min-width: $breakpoint-md) {
-      min-height: calc(100vh - 104px);
-      height: auto;
+      min-height: calc(100vh - 105px);
+      height: calc(100vh - 105px);
     }
 
     @media screen and (max-width: $breakpoint-md) {
@@ -90,7 +90,7 @@
   }
 
   &--2x2 {
-    min-height: 800px;
+    min-height: 850px;
   }
 
   &__image-wrapper {

package/dist/luna/utils/checkForDangerouslySet.js

@@ -1,12 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.checkAndSet = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
 var tags = ["<p", "<a", "<im", "<h1", "<h2", "<h3", "<h4", "<h5", "<h6", "<di", "<sp", "<ul", "<ol", "<li", "<a ", "<ta"];
 
-var _default = function _default(text) {
+var checkForDangerouslySet = function checkForDangerouslySet(text) {
   if (typeof text !== "string") {
     return false;
   }
@@ -23,4 +28,28 @@ var _default = function _default(text) {
   }
 };
 
-exports.default = _default;
+var _default = checkForDangerouslySet;
+exports.default = _default;
+
+var checkAndSet = function checkAndSet(text, classNamePrefix, classNameSuffix, color) {
+  if (checkForDangerouslySet(text)) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(classNamePrefix, "__").concat(classNameSuffix || "text-holder"),
+      style: {
+        color: color || "#242D2F"
+      },
+      dangerouslySetInnerHTML: {
+        __html: text
+      }
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement("p", {
+      className: "".concat(classNamePrefix, "__").concat(classNameSuffix || "text"),
+      style: {
+        color: color || "#242D2F"
+      }
+    }, text);
+  }
+};
+
+exports.checkAndSet = checkAndSet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.288",
+  "version": "3.1.292",
   "dependencies": {
     "@storybook/addon-knobs": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.9",
@@ -22,7 +22,7 @@
     "react-scroll": "^1.7.14",
     "react-slidedown": "^2.4.5",
     "smoothscroll-polyfill": "^0.4.4",
-    "terra-one": "^3.0.98"
+    "terra-one": "~3.0.100"
   },
   "peerDependencies": {
     "node-sass": "^4.12.0",