chore: renameing variables to fix a lint issue

swisspost · Dec 11, 2024 · 2be3e27 · 2be3e27
1 parent 89ee1be
commit 2be3e27
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 23 deletions.
diff --git a/packages/components/src/utils/breakpoints.ts b/packages/components/src/utils/breakpoints.ts
@@ -8,22 +8,24 @@ type MapItem = {
 type ListenerType = 'key' | 'name';
 
 export class Breakpoint {
-  private breakpointMap: MapItem[];
-  private current_key: string;
-  private current_name: string;
+  private readonly breakpointMap: MapItem[];
+  private readonly current = {
+    key: '',
+    name: '',
+  };
 
   constructor() {
     if (!this.breakpointMap) {
       const styles = getComputedStyle(document.documentElement);
-      const keys = styles.getPropertyValue('--post-breakpoint-names').split(', ');
-      const names = styles.getPropertyValue('--post-viewport-names').split(', ');
+      const keys = styles.getPropertyValue('--post-breakpoint-keys').split(', ');
+      const names = styles.getPropertyValue('--post-breakpoint-names').split(', ');
 
       this.breakpointMap = styles
-        .getPropertyValue('--post-breakpoint-keys')
-        .split(' ')
-        .map((key, i) => {
+        .getPropertyValue('--post-breakpoint-widths')
+        .split(', ')
+        .map((width, i) => {
           return {
-            minWidth: Number(key),
+            minWidth: Number(width),
             key: keys[i],
             name: names[i],
           };
@@ -37,26 +39,24 @@ export class Breakpoint {
   private updateHandler(emitEvents = true) {
     const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
 
-    if (this.current_key !== calculated.key) {
-      this.current_key = calculated.key;
+    if (this.current.key !== calculated.key) {
+      this.current.key = calculated.key;
       if (emitEvents) this.dispatchEvent('key');
     }
 
-    if (this.current_name !== calculated.name) {
-      this.current_name = calculated.name;
+    if (this.current.name !== calculated.name) {
+      this.current.name = calculated.name;
       if (emitEvents) this.dispatchEvent('name');
     }
   }
 
   private dispatchEvent(type: ListenerType) {
-    window.dispatchEvent(
-      new CustomEvent(`postBreakpoint:${type}`, { detail: this[`current_${type}`] }),
-    );
+    window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
   }
 
   public get(type: ListenerType) {
     this.updateHandler(false);
-    return this[`current_${type}`];
+    return this.current[type];
   }
 }
 

diff --git a/packages/styles/src/components/breakpoints.scss b/packages/styles/src/components/breakpoints.scss
@@ -4,14 +4,14 @@
 @use '../variables/breakpoints';
 
 :root {
-  $breakpoint-list: ();
+  $breakpointList: ();
 
   @each $key, $value in breakpoints.$grid-breakpoints {
     $unitlessValue: math.div($value, $value * 0 + 1);
-    $breakpoint-list: list.append($breakpoint-list, $unitlessValue, comma);
+    $breakpointList: list.append($breakpointList, $unitlessValue, comma);
   }
 
-  --post-breakpoint-keys: #{$breakpoint-list};
-  --post-breakpoint-names: #{map.keys(breakpoints.$grid-breakpoints)};
-  --post-viewport-names: #{map.values(breakpoints.$grid-viewports)};
+  --post-breakpoint-widths: #{$breakpointList};
+  --post-breakpoint-keys: #{map.keys(breakpoints.$grid-breakpoints)};
+  --post-breakpoint-names: #{map.values(breakpoints.$grid-breakpoints-key-name-map)};
 }
diff --git a/packages/styles/src/variables/_breakpoints.scss b/packages/styles/src/variables/_breakpoints.scss
@@ -6,7 +6,7 @@ $grid-breakpoints: (
   xl: 1280px,
 ) !default;
 
-$grid-viewports: (
+$grid-breakpoints-key-name-map: (
   xs: 'mobile',
   sm: 'tablet',
   md: 'tablet',