luna-one 3.1.594 → 3.1.595

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

@@ -1,108 +1,108 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-unbounded-card {
-  box-shadow: none;
-  background-color: transparent;
-  &__header {
-    font-size: $large-body-font-size;
-    line-height: 1.5;
-  }
-  &__text {
-    flex-grow: 0;
-  }
-  &__body {
-    padding: 32px;
-  }
-  &__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,
-    & > .lf-player-container,
-    & > .ter-lottie-animation--wrapper {
-      cursor: pointer;
-    }
-  }
-  &__image--lottie {
-    display: block;
-  }
-  &__play-button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 60px;
-  }
-  &-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);
-      .ter-focused-image-container {
-        max-width: 1120px;
-        max-height: 675px;
-        margin: 0 auto;
-      }
-    }
-    &__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;
-    }
-  }
-  .luna-super-hero__play-btn {
-    width: 42px;
-  }
-  &__magnify {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    background-color: $sky-blue;
-    width: 24px;
-    height: 24px;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &-icon {
-      display: block;
-      height: 16px;
-      width: 16px;
-      pointer-events: none;
-    }
-  }
-  .ter-bounded-card__image > .ter-lottie-animation--wrapper {
-    width: 100%;
-  }
-}
-
-.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;
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.ter-unbounded-card {
+  box-shadow: none;
+  background-color: transparent;
+  &__header {
+    font-size: $large-body-font-size;
+    line-height: 1.5;
+  }
+  &__text {
+    flex-grow: 0;
+  }
+  &__body {
+    padding: 32px;
+  }
+  &__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,
+    & > .lf-player-container,
+    & > .ter-lottie-animation--wrapper {
+      cursor: pointer;
+    }
+  }
+  &__image--lottie {
+    display: block;
+  }
+  &__play-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 60px;
+  }
+  &-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);
+      .ter-focused-image-container {
+        max-width: 1120px;
+        max-height: 675px;
+        margin: 0 auto;
+      }
+    }
+    &__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;
+    }
+  }
+  .luna-super-hero__play-btn {
+    width: 42px;
+  }
+  &__magnify {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-color: $sky-blue;
+    width: 24px;
+    height: 24px;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-icon {
+      display: block;
+      height: 16px;
+      width: 16px;
+      pointer-events: none;
+    }
+  }
+  .ter-bounded-card__image > .ter-lottie-animation--wrapper {
+    width: 100%;
+  }
+}
+
+.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/playIcon.svg

@@ -1,17 +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>
+<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/VariableContentCard/VariableContentCard.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 require("./VariableContentCard.scss");
 var _play = _interopRequireDefault(require("../../images/play.svg"));
 var _reactPlayer = _interopRequireDefault(require("react-player"));
@@ -13,7 +14,6 @@ var _fpoSquare = _interopRequireDefault(require("../../images/fpo-square.png"));
 var _checkForDangerouslySet = _interopRequireDefault(require("../../utils/checkForDangerouslySet"));
 var _removeSpaces = require("../../utils/removeSpaces");
 var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
-var _lodash = require("lodash");
 var _terraOne = require("terra-one");
 var _reactAwesomeReveal = require("react-awesome-reveal");
 var _VidyardModal = _interopRequireDefault(require("../VidyardModal/VidyardModal"));
@@ -62,7 +62,7 @@ var VariableContentCard = function VariableContentCard(_ref) {
       return deployModalonEnter(e, index);
     },
     className: "luna-video-feat__thumbnail-container",
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     tabIndex: mouse ? "" : "0",
     onClick: function onClick() {
       return deployModal(index);
@@ -84,7 +84,7 @@ var VariableContentCard = function VariableContentCard(_ref) {
       e.target.src = _fpoSquare["default"];
     }
   }), content.video && /*#__PURE__*/_react["default"].createElement("img", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     tabIndex: mouse ? "" : "0",
     onClick: function onClick() {
       return deployModal(index);