chore: remove all double equals

.changeset/thin-icons-pay.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+ToggleGroup: Active item equality check is now strict
+Tabs: Active item equality check is now strict

apps/theme/app/testside/FullBaseTest/FullBaseTest.tsx

@@ -104,10 +104,10 @@ export const FullBaseTest = () => {
     let bgDefault = blueColors[99];
     let bgSubtle = blueColors[95];
 
-    if (theme == 'dark') {
+    if (theme === 'dark') {
       bgDefault = blueColors[9];
       bgSubtle = blueColors[13];
-    } else if (theme == 'contrast') {
+    } else if (theme === 'contrast') {
       bgDefault = blueColors[0];
       bgSubtle = blueColors[5];
     }

apps/theme/components/ColorPicker/ColorPicker.tsx

@@ -54,8 +54,8 @@ export const ColorPicker = ({
               className={cl(
                 classes.status,
                 'ds-focus',
-                colorError == 'decorative' && classes.statusYellow,
-                colorError == 'interaction' && classes.statusOrange,
+                colorError === 'decorative' && classes.statusYellow,
+                colorError === 'interaction' && classes.statusOrange,
               )}
             >
               {colorError === 'none' && (
@@ -64,7 +64,7 @@ export const ColorPicker = ({
               {colorError === 'decorative' && (
                 <ExclamationmarkIcon title='Viktig informasjon om fargen' />
               )}
-              {colorError == 'interaction' && (
+              {colorError === 'interaction' && (
                 <ExclamationmarkIcon title='Viktig informasjon om fargen' />
               )}
             </button>
@@ -75,14 +75,14 @@ export const ColorPicker = ({
                 'Denne fargen har god nok kontrast og kan brukes normalt i systemet.'}
             </div>
             <div>
-              {colorError == 'decorative' && (
+              {colorError === 'decorative' && (
                 <div>
                   Vær oppmerksom på at Base Default fargen har mindre enn 3:1
                   kontrast mot bakgrunnsfargene. Se alle kontrastgrensene inne
                   på hver farge.
                 </div>
               )}
-              {colorError == 'interaction' && (
+              {colorError === 'interaction' && (
                 <div>
                   Base Default fargen har ikke god nok kontrast mot hvit eller
                   svart tekst på tvers av Base fargene.

biome.jsonc

@@ -74,8 +74,7 @@
         "useSelfClosingElements": "off"
       },
       "suspicious": {
-        "noArrayIndexKey": "off",
-        "noDoubleEquals": "off" // TODO: Enable this rule
+        "noArrayIndexKey": "off"
       }
     },
     "ignore": []

packages/cli/src/colors/colorUtils.ts

@@ -29,7 +29,7 @@ export const hexToCssHsl = (hex: string, valuesOnly = false) => {
   let h = 0;
   let s = 0;
   let l = (max + min) / 2;
-  if (max == min) {
+  if (max === min) {
     h = s = 0; // achromatic
   } else {
     const d = max - min;
@@ -68,11 +68,11 @@ export const hexToHSL = (H: string) => {
   let r = 0;
   let g = 0;
   let b = 0;
-  if (H.length == 4) {
+  if (H.length === 4) {
     r = parseInt('0x' + H[1] + H[1]);
     g = parseInt('0x' + H[2] + H[2]);
     b = parseInt('0x' + H[3] + H[3]);
-  } else if (H.length == 7) {
+  } else if (H.length === 7) {
     r = parseInt('0x' + H[1] + H[2]);
     g = parseInt('0x' + H[3] + H[4]);
     b = parseInt('0x' + H[5] + H[6]);
@@ -88,17 +88,17 @@ export const hexToHSL = (H: string) => {
   const cmax = Math.max(r, g, b);
   const delta = cmax - cmin;
 
-  if (delta == 0) h = 0;
-  else if (cmax == r) h = ((g - b) / delta) % 6;
-  else if (cmax == g) h = (b - r) / delta + 2;
+  if (delta === 0) h = 0;
+  else if (cmax === r) h = ((g - b) / delta) % 6;
+  else if (cmax === g) h = (b - r) / delta + 2;
   else h = (r - g) / delta + 4;
 
   h = Math.round(h * 60);
 
   if (h < 0) h += 360;
 
   l = (cmax + cmin) / 2;
-  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
   s = +(s * 100).toFixed(1);
   l = +(l * 100).toFixed(1);
 
@@ -178,9 +178,9 @@ export const HSLToHex = (h: number, s: number, l: number) => {
   b = parseInt(Math.round((b + m) * 255).toString(16), 16);
 
   // Prepend 0s, if necessary
-  if (r.toString().length == 1) r = parseInt('0' + r.toString(), 10);
-  if (g.toString().length == 1) g = parseInt('0' + g.toString(), 10);
-  if (b.toString().length == 1) b = parseInt('0' + b.toString(), 10);
+  if (r.toString().length === 1) r = parseInt('0' + r.toString(), 10);
+  if (g.toString().length === 1) g = parseInt('0' + g.toString(), 10);
+  if (b.toString().length === 1) b = parseInt('0' + b.toString(), 10);
 
   return '#' + r + g + b;
 };

packages/react/src/components/Tabs/TabContent.tsx

@@ -21,7 +21,7 @@ export type TabContentProps = {
 export const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
   ({ children, value, className, ...rest }, ref) => {
     const { value: tabsValue, size } = useContext(TabsContext);
-    const active = value == tabsValue;
+    const active = value === tabsValue;
 
     return (
       <>

packages/react/src/components/Tabs/useTab.ts

@@ -22,7 +22,7 @@ export const useTabItem: UseTab = (props: TabProps) => {
   return {
     ...rest,
     id: buttonId,
-    'aria-selected': tabs.value == value,
+    'aria-selected': tabs.value === value,
     role: 'tab',
     size: tabs.size,
     onClick: () => {

packages/react/src/components/ToggleGroup/ToggleGroupItem/useToggleGroupitem.ts

@@ -24,7 +24,7 @@ export const useToggleGroupItem: UseToggleGroupItem = (
   const genValue = useId();
   const toggleGroup = useContext(ToggleGroupContext);
   const value = props.value ?? genValue;
-  const active = toggleGroup.value == value;
+  const active = toggleGroup.value === value;
   const buttonId = `togglegroup-item-${useId()}`;
 
   return {

packages/react/src/utilities/RovingFocus/RovingFocusItem.tsx

@@ -42,7 +42,7 @@ export const RovingFocusItem = forwardRef<HTMLElement, RovingFocusItemProps>(
     const Component = asChild ? Slot : 'div';
 
     const focusValue =
-      value ?? (typeof rest.children == 'string' ? rest.children : '');
+      value ?? (typeof rest.children === 'string' ? rest.children : '');
 
     const { getOrderedItems, getRovingProps, orientation } =
       useRovingFocus(focusValue);