@onewelcome/react-lib-components 1.7.0 → 1.8.0

package/src/util/helper.test.tsx

@@ -17,9 +17,10 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { fireEvent, waitFor } from "@testing-library/dom";
 import {
-  generateID,
-  filterProps,
   debounce,
+  filterProps,
+  generateID,
+  remToPx,
   throttle,
   areArraysDifferent,
   getValueByPath,
@@ -84,11 +85,11 @@ describe("debounce function", () => {
 
     window.addEventListener("resize", debounce(debouncedFunction, 200));
 
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
 
     await waitFor(() => expect(debouncedFunction).toHaveBeenCalledTimes(1));
   });
@@ -158,16 +159,16 @@ describe("throttling works", () => {
 
     render(<ExampleComponent throttledFunction={exampleFunction} />);
 
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
-    await fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
+    fireEvent.resize(window);
 
     expect(exampleFunction).not.toHaveBeenCalledTimes(1);
     expect(exampleFunction).not.toHaveBeenCalledTimes(10);
@@ -320,3 +321,19 @@ describe("verifies if isEqual returns the correct value", () => {
     expect(res).toBe(false);
   });
 });
+
+describe("pixel to rem function works", () => {
+  document.documentElement.style.setProperty("font-size", "16px");
+
+  it.each([
+    [1, 16],
+    [1.25, 20],
+    [1.5, 24],
+    [1.75, 28],
+    [2, 32]
+  ])("%p rem equals %p px when font-size is 16px", async (rem: number, px: number) => {
+    const result = remToPx(rem);
+
+    expect(result).toBe(px);
+  });
+});

package/src/util/helper.tsx

@@ -176,3 +176,8 @@ export const getValueByPath = (obj: { [key: string]: any }, path: string): any =
     return res[prop];
   }, obj);
 };
+
+/** Source: https://stackoverflow.com/a/42769683/5084110 */
+export const remToPx = (rem: number): number => {
+  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+};

package/src/variables.scss

@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+$form-element-horizontal-padding-mobile: 1rem;
+$form-element-horizontal-padding-desktop: 1.25rem;