@onewelcome/react-lib-components 8.9.1 → 8.11.0

package/src/mixins.module.scss

@@ -15,6 +15,7 @@
  */
 
 @use "./readyclasses.module.scss";
+@use "./variables.scss";
 
 @mixin button($variant: "text", $type: "default") {
   $disabledSelector: if($type == "link", ".disabled", ":disabled");
@@ -170,7 +171,7 @@
   border-style: var(--button-border-style);
   border-radius: var(--button-border-radius);
   font-size: var(--button-font-size);
-  line-height: var(--button-font-size);
+  line-height: 1;
   margin: 0;
   padding: 0.5rem 0.75rem;
   min-height: 2.5rem;
@@ -343,3 +344,35 @@
   color: var(--default);
   margin: 0 0 1rem 0;
 }
+
+@mixin breakpoint($minOrMax, $breakpoint) {
+  // If the key exists in the map
+  @if map-has-key(variables.$breakpoints, $breakpoint) {
+    @if ($minOrMax == "min") {
+      @media screen and (min-width: #{inspect(map-get(variables.$breakpoints, $breakpoint))}) {
+        @content;
+      }
+    } @else if ($minOrMax == "max") {
+      @media screen and (max-width: #{inspect(map-get(variables.$breakpoints, $breakpoint))}) {
+        @content;
+      }
+    } @else {
+      @warn "First argument should 'min' or 'max'";
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @if ($minOrMax == "min") {
+      @media screen and (min-width: $breakpoint) {
+        @content;
+      }
+    } @else if ($minOrMax == "max") {
+      @media screen and (max-width: $breakpoint) {
+        @content;
+      }
+    } @else {
+      @warn "First argument should 'min' or 'max'";
+    }
+  }
+}

package/src/util/helper.tsx

@@ -14,11 +14,13 @@
  *    limitations under the License.
  */
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 type KeyValuePair = { [key: string]: unknown };
 
 export const generateID = (length = 15, stringToWeaveIn?: string) => {
   /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
-  let hashCharacters = [
+  const hashCharacters = [
     "1",
     "2",
     "3",
@@ -87,7 +89,7 @@ export const generateID = (length = 15, stringToWeaveIn?: string) => {
 
   /** Generate an id of x characters in length */
   for (let i = 0; i < length && id.length < length; i++) {
-    let stringCharacter =
+    const stringCharacter =
       typeof stringToWeaveIn === "string" &&
       stringToWeaveIn?.[i] !== undefined &&
       !/\s/.test(stringToWeaveIn[i])
@@ -137,7 +139,7 @@ export const throttle = (fn: (...args: unknown[]) => unknown, delay: number) =>
   let lastTime = 0;
 
   return function () {
-    let now = Date.now();
+    const now = Date.now();
 
     if (now - lastTime >= delay) {
       fn();
@@ -146,7 +148,7 @@ export const throttle = (fn: (...args: unknown[]) => unknown, delay: number) =>
   };
 };
 
-export const isEqual = (x: any, y: any): boolean => {
+const isEqual = (x: any, y: any): boolean => {
   const typesCoincide = x && y && typeof x === "object" && typeof y === "object";
   return typesCoincide
     ? Object.keys(x).length === Object.keys(y).length &&
@@ -189,12 +191,14 @@ export const isJsonString = (str: any) => {
 
 type ObjectType = { [key: string]: any };
 
-export const deepMerge = <T extends {}>(obj1: ObjectType, obj2: ObjectType | false): T => {
-  if (!obj2) return obj1 as T;
+export const deepMerge = <T extends object>(obj1: ObjectType, obj2: ObjectType | false): T => {
+  if (!obj2) {
+    return obj1 as T;
+  }
 
-  let result: ObjectType = { ...obj1 };
+  const result: ObjectType = { ...obj1 };
 
-  for (let key in obj2) {
+  for (const key in obj2) {
     if (Object.prototype.hasOwnProperty.call(obj2, key)) {
       if (
         typeof obj2[key] === "object" &&

package/src/variables.scss

@@ -25,3 +25,14 @@ $toggle-z-index: 10;
 $modal-z-index: 10;
 $snackbar-z-index: 20;
 $alert-z-index: 20;
+
+/** Breakpoints **/
+$small: 30em; // 480px
+$medium: 50em; // 800px
+$large: 90em; //1440px
+
+$breakpoints: (
+  "small": $small,
+  "medium": $medium,
+  "large": $large
+) !default;