luna-one 3.1.303 → 3.1.304

package/dist/luna/components/OverlayNotice/OverlayNotice.js

@@ -21,6 +21,8 @@ var _useScreenSize2 = require("../../utils/hooks/useScreenSize");
 
 var _terraOne = require("terra-one");
 
+var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
+
 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; }
@@ -44,6 +46,9 @@ var OverlayNotice = function OverlayNotice(_ref) {
       isClosed = _useState4[0],
       setIsClosed = _useState4[1];
 
+  var _useMouse = (0, _useMouse2.default)(),
+      mouse = _useMouse.mouse;
+
   (0, _react.useEffect)(function () {
     //Set a short timer so that the banner doesn't appear instantly
     var slideInTimer = setTimeout(function () {
@@ -58,7 +63,8 @@ var OverlayNotice = function OverlayNotice(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "overlay-notice__container ".concat(isClosed ? "overlay-notice__container--closed" : "")
   }, renderExpandButton && /*#__PURE__*/_react.default.createElement("button", {
-    className: "overlay-notice__button overlay-notice__button--expand ".concat(isClosed ? "overlay-notice__button--expand--closed" : ""),
+    "aria-label": "View more details about ".concat(header),
+    className: mouse ? "overlay-notice__button overlay-notice__button--expand" : "overlay-notice__button overlay-notice__button--expand tabFocus ".concat(isClosed ? "overlay-notice__button--expand--closed" : ""),
     onClick: function onClick() {
       return setExpanded(true);
     }
@@ -75,15 +81,26 @@ var OverlayNotice = function OverlayNotice(_ref) {
   }, header && /*#__PURE__*/_react.default.createElement("div", {
     className: "overlay-notice__header"
   }, header), details && renderDetails && /*#__PURE__*/_react.default.createElement("div", {
-    className: "overlay-notice__details"
+    className: "overlay-notice__details",
+    style: isExpanded || width > 600 ? {
+      display: "block"
+    } : {
+      display: "none"
+    }
   }, details)), button && renderDetails && /*#__PURE__*/_react.default.createElement("div", {
-    className: "overlay-notice__cta-button"
+    className: "overlay-notice__cta-button",
+    style: isExpanded || width > 600 ? {
+      display: "block"
+    } : {
+      display: "none"
+    }
   }, /*#__PURE__*/_react.default.createElement(_terraOne.Button, {
     className: "ter-button--primary--1",
     url: button === null || button === void 0 ? void 0 : button.url,
     text: button === null || button === void 0 ? void 0 : button.text
   })), /*#__PURE__*/_react.default.createElement("button", {
-    className: "overlay-notice__button overlay-notice__button--close",
+    className: mouse ? "overlay-notice__button overlay-notice__button--close" : "overlay-notice__button overlay-notice__button--close tabFocus",
+    "aria-label": "dismiss notice",
     onClick: function onClick(e) {
       setIsClosed(true);
       handleClose(e.target.value);
@@ -91,7 +108,7 @@ var OverlayNotice = function OverlayNotice(_ref) {
   }, /*#__PURE__*/_react.default.createElement("img", {
     src: _closeDarkNavy.default,
     alt: "Close Icon",
-    className: "overlay-notice__close-button-icon"
+    className: mouse ? "overlay-notice__close-button-icon" : "overlay-notice__close-button-icon tabFocus"
   })))));
 };
 

package/dist/luna/components/OverlayNotice/OverlayNotice.scss

@@ -193,6 +193,10 @@
       }
     }
 
+    &--close.tabFocus:focus {
+        outline: 2px solid $sky-blue;
+    }
+
     &--expand {
       background-color: $trimble-blue;
       position: absolute;
@@ -215,6 +219,9 @@
         background-color: $sky-blue;
       }
     }
+    &--expand.tabFocus:focus {
+        outline: 2px solid $sky-blue;
+    }
 
     @media screen and (max-width: $breakpoint-xs) {
       width: 20px;

package/dist/luna/heroes/SuperHero/SuperHero.scss

@@ -344,7 +344,6 @@
   }
 
   &__text,
-  &__text p,
   &__text h1,
   &__text h2,
   &__text h3,
@@ -361,6 +360,19 @@
       font-size: $body-font-size-mobile;
     }
   }
+  &__text p {
+    font-size: $body-font-size;
+    line-height: 18px;
+    letter-spacing: -0.005em;
+    @include benton-light();
+    @media screen and (max-width: $breakpoint-xxs) {
+      font-size: $body-font-size-mobile;
+    }
+  }
+
+  &__text p:last-child {
+    margin-bottom: 37px;
+  }
 
   &__text-#ffffff p,
   &__text-#ffffff h1,
@@ -442,6 +454,7 @@
     height: auto;
     min-height: unset;
   }
+
 }
 
 .super-hero-fullscreen {
@@ -476,8 +489,22 @@
       font-size: $subheading-size-mobile;
     }
   }
+
+  &__text p {
+    font-size: $body-font-size;
+    @include benton-light();
+
+    @media screen and (max-width: $breakpoint-sm) {
+      font-size: $body-font-size-mobile;
+      line-height: 23px;
+    }
+  }
+
+  &__text p:last-child {
+    margin-bottom: 37px;
+  }
+
   &__text,
-  &__text p,
   &__text h1,
   &__text h2,
   &__text h3,

package/dist/luna/heroes/SuperHero/SuperHeroMethods.js

@@ -22,7 +22,7 @@ var _DataPoint = _interopRequireDefault(require("../../components/DataPoint/Data
 var _Video = _interopRequireDefault(require("../../components/Video/Video"));
 
 var ctaRowOrColumn = function ctaRowOrColumn(ctas, variant) {
-  var rowVariants = ['variant_3', 'variant_6'];
+  var rowVariants = ["variant_3", "variant_6"];
 
   if (!ctas) {
     return;
@@ -52,7 +52,7 @@ var ctaRowOrColumn = function ctaRowOrColumn(ctas, variant) {
     var width = 0;
     var height = 0;
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       var _window = window,
           innerWidth = _window.innerWidth,
           innerHeight = _window.innerHeight;
@@ -67,9 +67,9 @@ var ctaRowOrColumn = function ctaRowOrColumn(ctas, variant) {
   };
 
   if (variant && variant === findRowVariant() && !hasLongText() && getWindowDimensions().width > 600) {
-    ctas.direction = 'row';
+    ctas.direction = "row";
   } else {
-    ctas.direction = 'column';
+    ctas.direction = "column";
   }
 
   return ctas;
@@ -344,7 +344,7 @@ var renderImage = function renderImage(image, focusedImage, variant) {
   if (image && !focusedImage) {
     return /*#__PURE__*/_react.default.createElement(_terraOne.Image, {
       src: (image === null || image === void 0 ? void 0 : image.src) ? image.src : _fpoSquare.default,
-      alt: (image === null || image === void 0 ? void 0 : image.alt) || 'placeholder image',
+      alt: (image === null || image === void 0 ? void 0 : image.alt) || "placeholder image",
       className: "luna-super-hero__image",
       onError: function onError(e) {
         e.target.onerror = null;
@@ -365,19 +365,19 @@ var renderImage = function renderImage(image, focusedImage, variant) {
 };
 
 var checkForVariant = function checkForVariant(variant) {
-  if (variant === 'variant_8' || variant === 'variant_9' || variant === 'variant_10') {
-    return 'super-hero--fullscreen-components';
+  if (variant === "variant_8" || variant === "variant_9" || variant === "variant_10") {
+    return "super-hero--fullscreen-components";
   } else {
-    return 'super-hero--padded-components';
+    return "super-hero--padded-components";
   }
 };
 
 exports.checkForVariant = checkForVariant;
 
 var renderVariantsOneToSeven = function renderVariantsOneToSeven(variant, contentSide, focusedImage, imageSizes, eyebrow, header, subHeader, text, cta, ctas, theme, Link, mouse, color, backgroundColor, paddingClass, modalDeployed, image, video, thumbnail, hovering, playing, deployModal, hideModal, setHovering, togglePlaying, content, ContentComponent, transcriptVisable, setTranscriptVisable, transcript, transcriptText, closeTranscript, alignTop) {
-  var alignmentClass = alignTop ? 'luna-super-hero__image-wrapper--uneven-alignment' : '';
+  var alignmentClass = alignTop ? "luna-super-hero__image-wrapper--uneven-alignment" : "";
 
-  if (checkForVariant(variant) === 'super-hero--padded-components') {
+  if (checkForVariant(variant) === "super-hero--padded-components") {
     return /*#__PURE__*/_react.default.createElement("section", {
       className: "luna-super-hero luna-super-hero-".concat(variant, "-").concat(contentSide, " ").concat(paddingClass),
       style: {
@@ -386,7 +386,7 @@ var renderVariantsOneToSeven = function renderVariantsOneToSeven(variant, conten
     }, /*#__PURE__*/_react.default.createElement("aside", {
       className: "luna-super-hero__image-wrapper luna-super-hero__image-wrapper-".concat(variant, "-").concat(contentSide, " ").concat(alignmentClass)
     }, /*#__PURE__*/_react.default.createElement("span", {
-      tabIndex: mouse ? '' : '1'
+      tabIndex: mouse ? "" : "1"
     }, renderImage(image, focusedImage, variant)), /*#__PURE__*/_react.default.createElement(_Video.default, {
       content: content
     })), !modalDeployed && /*#__PURE__*/_react.default.createElement("aside", {
@@ -403,7 +403,10 @@ var renderVariantsOneToSeven = function renderVariantsOneToSeven(variant, conten
       }
     }, header), subHeader && /*#__PURE__*/_react.default.createElement("h5", {
       className: "luna-super-hero__subHeader",
-      style: {
+      style: !text ? {
+        color: color,
+        marginBottom: "37px"
+      } : {
         color: color
       }
     }, subHeader), text && /*#__PURE__*/_react.default.createElement("div", {
@@ -419,7 +422,7 @@ var renderVariantsOneToSeven = function renderVariantsOneToSeven(variant, conten
       url: cta.url,
       text: cta.text,
       className: // TODO this will change once we have themes and button styling/themes confirmed
-      (theme === null || theme === void 0 ? void 0 : theme.ctaOne) ? "ter-button--".concat(theme === null || theme === void 0 ? void 0 : theme.ctaOne) : 'ter-button--primary--1'
+      (theme === null || theme === void 0 ? void 0 : theme.ctaOne) ? "ter-button--".concat(theme === null || theme === void 0 ? void 0 : theme.ctaOne) : "ter-button--primary--1"
     }), ctas && /*#__PURE__*/_react.default.createElement(_terraOne.CTASection, {
       ctas: ctaRowOrColumn(ctas, variant)
     }))));
@@ -431,26 +434,26 @@ var renderVariantsOneToSeven = function renderVariantsOneToSeven(variant, conten
 exports.renderVariantsOneToSeven = renderVariantsOneToSeven;
 
 var renderVariantEightToTen = function renderVariantEightToTen(variant, ContentComponent, contentSide, focusedImage, imageSizes, eyebrow, header, subHeader, text, cta, ctas, theme, Link, mouse, color, backgroundColor, dataPoints) {
-  if (checkForVariant(variant) === 'super-hero--fullscreen-components') {
+  if (checkForVariant(variant) === "super-hero--fullscreen-components") {
     var _focusedImage$focalPo2, _React$createElement;
 
     return /*#__PURE__*/_react.default.createElement("section", {
-      className: "super-hero-fullscreen super-hero-fullscreen-".concat(variant, " ").concat((dataPoints === null || dataPoints === void 0 ? void 0 : dataPoints.length) ? 'super-hero-fullscreen--data-points' : ''),
+      className: "super-hero-fullscreen super-hero-fullscreen-".concat(variant, " ").concat((dataPoints === null || dataPoints === void 0 ? void 0 : dataPoints.length) ? "super-hero-fullscreen--data-points" : ""),
       style: {
-        backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || '#F8F8FB'
+        backgroundColor: (theme === null || theme === void 0 ? void 0 : theme.backgroundColor) || "#F8F8FB"
       }
     }, /*#__PURE__*/_react.default.createElement(_reactAwesomeReveal.Fade, {
       className: "super-hero-fullscreen__hero-image super-hero-fullscreen__hero-image-".concat(variant, "-").concat(contentSide, " super-hero-fullscreen--focused super-hero-fullscreen--focused-").concat(variant, "-").concat(contentSide)
     }, /*#__PURE__*/_react.default.createElement("span", {
-      tabIndex: mouse ? '' : '0'
+      tabIndex: mouse ? "" : "0"
     }, (dataPoints === null || dataPoints === void 0 ? void 0 : dataPoints.length) && /*#__PURE__*/_react.default.createElement(_reactAwesomeReveal.Fade, {
       className: "super-hero-fullscreen__data-points super-hero-fullscreen__data-points--mobile"
     }, /*#__PURE__*/_react.default.createElement(_DataPoint.default, {
       points: dataPoints,
-      variant: 'variant_2A',
+      variant: "variant_2A",
       theme: {
-        color: '#ffffff',
-        backgroundColor: '#0063A3'
+        color: "#ffffff",
+        backgroundColor: "#0063A3"
       }
     })), /*#__PURE__*/_react.default.createElement(_terraOne.FocusedImage, {
       focalPointImage: focusedImage === null || focusedImage === void 0 ? void 0 : focusedImage.focalPointImage,
@@ -461,10 +464,10 @@ var renderVariantEightToTen = function renderVariantEightToTen(variant, ContentC
       className: "super-hero-fullscreen__data-points"
     }, /*#__PURE__*/_react.default.createElement(_DataPoint.default, {
       points: dataPoints,
-      variant: 'variant_2A',
+      variant: "variant_2A",
       theme: {
-        color: '#ffffff',
-        backgroundColor: '#0063A3'
+        color: "#ffffff",
+        backgroundColor: "#0063A3"
       }
     })), /*#__PURE__*/_react.default.createElement(_reactAwesomeReveal.Fade, {
       className: "super-hero-fullscreen__container super-hero-fullscreen__container-".concat(variant, "-").concat(contentSide)
@@ -482,7 +485,10 @@ var renderVariantEightToTen = function renderVariantEightToTen(variant, ContentC
       }
     }, header), subHeader && /*#__PURE__*/_react.default.createElement("h5", {
       className: "super-hero-fullscreen__subHeader",
-      style: {
+      style: !text ? {
+        color: color,
+        marginBottom: "37px"
+      } : {
         color: color
       }
     }, subHeader), text && /*#__PURE__*/_react.default.createElement("div", (_React$createElement = {
@@ -492,11 +498,11 @@ var renderVariantEightToTen = function renderVariantEightToTen(variant, ContentC
     }), (0, _defineProperty2.default)(_React$createElement, "dangerouslySetInnerHTML", {
       __html: text
     }), _React$createElement)), !ctas && cta && /*#__PURE__*/_react.default.createElement(_terraOne.Button, {
-      tabIndex: mouse ? '' : '0',
+      tabIndex: mouse ? "" : "0",
       Link: Link,
       url: cta.url,
       text: cta.text,
-      className: (theme === null || theme === void 0 ? void 0 : theme.ctaOne) ? "ter-button--".concat(theme === null || theme === void 0 ? void 0 : theme.ctaOne) : 'ter-button--primary--1'
+      className: (theme === null || theme === void 0 ? void 0 : theme.ctaOne) ? "ter-button--".concat(theme === null || theme === void 0 ? void 0 : theme.ctaOne) : "ter-button--primary--1"
     }), ctas && /*#__PURE__*/_react.default.createElement(_terraOne.CTASection, {
       ctas: ctas
     })))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.303",
+  "version": "3.1.304",
   "dependencies": {
     "@storybook/addon-knobs": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.9",