feat(utility): added minSize parameter, documentation updated

Author: raphaelamadeu

packages/utilities/src/utilities/sameheight/sameheight.js

@@ -11,38 +11,52 @@
  * @example
  * import {sameheight} from '@carbon/ibmdotcom-utilities';
  *
- * sameheight(ElementArray);
+ * sameheight(ElementArray, 'md');
+ *
+ * if you want the utility to refresh the sizes as you resize the screen, consideer using a listener:
+ * window.addEventListener('resize', sameheight(ElementArray, 'md'));
  *
  * @param {Array} elemCollection Html objects array
+ * @param {string} minSize Minimum size for the utility to be activated, empty for small,
+ *  md for medium, lg for large, xlg for xlarge, max for maximum
  */
-function sameheight(elemCollection) {
-  /**
-   * Internal function made for avoiding adding more eventlisteners
-   *
-   * @param {Array} elemArr array of elements to be alligned
-   */
-  function setHeight(elemArr) {
-    if (window.innerWidth > 671) {
-      let targetHeight = 0;
-      elemArr.forEach(elem => {
-        elem.offsetHeight > targetHeight
-          ? (targetHeight = elem.offsetHeight)
-          : false;
-      });
-
-      elemArr.forEach(elem => {
-        elem.offsetHeight == targetHeight
-          ? (elem.style.height = 'auto')
-          : (elem.style.height = targetHeight + 'px');
-      });
+function sameheight(elemCollection, minSize) {
+  const elemArr = Array.prototype.slice.call(elemCollection);
+  let targetWidth;
+  if (minSize) {
+    switch (minSize) {
+      case 'md':
+        targetWidth = 671;
+        break;
+      case 'lg':
+        targetWidth = 1055;
+        break;
+      case 'xlg':
+        targetWidth = 1311;
+        break;
+      case 'max':
+        targetWidth = 1583;
+        break;
+      default:
+        targetWidth = 0;
+        break;
     }
   }
 
-  const elemArr = Array.prototype.slice.call(elemCollection);
-  setHeight(elemArr);
-  window.addEventListener('resize', function() {
-    setHeight(elemArr);
-  });
+  if (window.innerWidth > targetWidth) {
+    let targetHeight = 0;
+    elemArr.forEach(elem => {
+      elem.offsetHeight > targetHeight
+        ? (targetHeight = elem.offsetHeight)
+        : false;
+    });
+
+    elemArr.forEach(elem => {
+      elem.offsetHeight == targetHeight
+        ? (elem.style.height = 'auto')
+        : (elem.style.height = targetHeight + 'px');
+    });
+  }
 }
 
 export default sameheight;