luna-one 3.1.371 → 3.1.372

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

@@ -19,8 +19,7 @@ require("./BlockListItems.scss");
 
 var _checkForExternalLink = _interopRequireDefault(require("../../utils/checkForExternalLink"));
 
-var _useWindowSize2 = _interopRequireDefault(require("../../utils/hooks/useWindowSize"));
-
+var firstRender = true;
 var imageSizes = {
   thumbnail: {
     desktop: {
@@ -77,6 +76,8 @@ var imageSizes = {
 };
 
 var AppCards = function AppCards(_ref) {
+  var _BlockListItems$conte;
+
   var content = _ref.content,
       motion = _ref.motion;
   var GatsbyImage = content === null || content === void 0 ? void 0 : content.GatsbyImage;
@@ -87,21 +88,28 @@ var AppCards = function AppCards(_ref) {
   var isMobile = false;
   var isPad = false;
 
-  var _useWindowSize = (0, _useWindowSize2.default)(),
-      size = _useWindowSize.size;
-
   var _useState = (0, _react.useState)({
-    height: null
+    height: null,
+    width: null
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      appCardHeight = _useState2[0],
-      setAppCardHeight = _useState2[1];
+      dimensions = _useState2[0],
+      setDimensions = _useState2[1];
+
+  if (typeof window !== "undefined" && firstRender) {
+    setDimensions({
+      height: window.innerHeight,
+      width: window.innerWidth
+    });
+    firstRender = false;
+  }
 
   (0, _react.useEffect)(function () {
     if (typeof window !== "undefined") {
       var handleResize = function handleResize() {
-        setAppCardHeight({
-          height: window.innerHeight
+        setDimensions({
+          height: window.innerHeight,
+          width: window.innerWidth
         });
       };
 
@@ -114,14 +122,14 @@ var AppCards = function AppCards(_ref) {
     }
   });
 
-  if (size === "desktop") {
+  if (dimensions.width >= 1101) {
     arraysNeeded = 3;
     colClassName = "three-col";
-  } else if (size === "tablet") {
+  } else if (dimensions.width <= 1100 && dimensions.width >= 801) {
     arraysNeeded = 2;
     colClassName = "two-col";
     isPad = true;
-  } else if (size === "mobile") {
+  } else if (dimensions.width <= 800) {
     arraysNeeded = 1;
     colClassName = "one-col";
     isMobile = true;
@@ -153,6 +161,8 @@ var AppCards = function AppCards(_ref) {
           text: card === null || card === void 0 ? void 0 : (_card$cardLink = card.cardLink) === null || _card$cardLink === void 0 ? void 0 : _card$cardLink.text,
           GatsbyImage: GatsbyImage,
           Link: Link,
+          viewLessText: card === null || card === void 0 ? void 0 : card.viewLessText,
+          viewMoreText: card === null || card === void 0 ? void 0 : card.viewMoreText,
           cardAlignment: content === null || content === void 0 ? void 0 : content.cardAlignment,
           imageSizes: imageSizes
         };
@@ -177,11 +187,11 @@ var AppCards = function AppCards(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "ter-app-cards__primitives",
     style: {
-      height: appCardHeight.height
+      height: dimensions.height
     }
   }), /*#__PURE__*/_react.default.createElement("h3", {
     className: "ter-app-cards__main-heading"
-  }, "Construction Heading One"), /*#__PURE__*/_react.default.createElement("section", {
+  }, _terraOne.BlockListItems === null || _terraOne.BlockListItems === void 0 ? void 0 : (_BlockListItems$conte = _terraOne.BlockListItems.content) === null || _BlockListItems$conte === void 0 ? void 0 : _BlockListItems$conte.title), /*#__PURE__*/_react.default.createElement("section", {
     className: "ter-app-cards"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: colClassName

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

@@ -128,35 +128,74 @@
 .ter-app-cards {
   display: flex;
   margin: 0 auto;
+  max-width: 1120px;
+  justify-content: space-between;
 
   .three-col {
-    display: block;
-    margin: 0 21px;
+    margin: 0 auto;
+    max-width: 399px;
+    min-width: 340px;
     width: 33%;
 
+    &:not(:first-child):not(:last-child) {
+      margin: 0 20px;
+    }
+
     .ter-app-card {
       margin-bottom: 41px;
+
+      &__link-holder {
+        width: unset;
+      }
     }
   }
+
   .two-col {
-    display: block;
-    margin: 0 19px;
-    width: 50%;
+    max-width: 399px;
+    min-width: 340px;
+
+    &:first-child {
+      margin-right: 10px;
+    }
+
+    &:last-child {
+      margin-left: 10px;
+    }
 
     .ter-app-card {
       margin-bottom: 37px;
+
+      &__link-holder {
+        width: unset;
+      }
     }
   }
   .one-col {
-    display: block;
+    margin: 0 auto;
+    max-width: 340px;
     width: 100%;
 
+    @media screen and (max-width: 800px) {
+      max-width: unset;
+      width: 100%;
+    }
+
+    @media screen and (max-width: 375px) {
+      min-width: 296px;
+      width: 100%;
+    }
+
     .ter-app-card {
       margin: 0 auto 21px;
-      max-width: 399px;
 
-      @media screen and (max-width: $breakpoint-sm) {
-        max-width: 340px;
+      &__link-holder {
+        width: unset;
+      }
+
+      @media screen and (max-width: 375px) {
+        &__half-col__right {
+          right: 25px;
+        }
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-one",
-  "version": "3.1.371",
+  "version": "3.1.372",
   "dependencies": {
     "@storybook/addon-knobs": "^6.3.1",
     "@testing-library/jest-dom": "^5.11.9",
@@ -24,7 +24,7 @@
     "react-scroll": "^1.7.14",
     "react-slidedown": "^2.4.5",
     "smoothscroll-polyfill": "^0.4.4",
-    "terra-one": "^3.0.123"
+    "terra-one": "^3.0.125"
   },
   "peerDependencies": {
     "node-sass": "^4.12.0",