fix(sonar): fixes to multiple medium level sonar issues

HCRC-162

Author: nikomakela

src/core/card/card.module.scss

@@ -140,6 +140,15 @@
           flex-direction: row;
         }
       }
+
+      &.horizontalBorder {
+        // overriding withborder param
+        border: none;
+
+        @include breakpoints.respond_below(s) {
+          border: 1px solid var(--color-black-30);
+        }
+      }
     }
 
     & > :first-child {
@@ -182,17 +191,6 @@
         }
       }
     }
-
-    &.responsive-reverse {
-      &.horizontalBorder {
-        // overriding withborder param
-        border: none;
-
-        @include breakpoints.respond_below(s) {
-          border: 1px solid var(--color-black-30);
-        }
-      }
-    }
   }
 
   .imageWrapper {
@@ -292,21 +290,13 @@
 
   .content {
     flex: 1;
-    @include breakpoints.respond_above(s) {
-      // min-height: var(--height-image-desktop);
-      // height: 100%;
-    }
   }
 
   .textWrapper {
     display: flex;
     flex-direction: column;
     padding: var(--spacing-s) var(--spacing-m);
 
-    @include breakpoints.respond_below(s) {
-      // background-color: var(--color-white);
-    }
-
     .title {
       font-size: var(--fontsize-heading-s);
       line-height: var(--lineheight-m);
@@ -341,6 +331,7 @@
       display: -webkit-box;
       &.clamp {
         -webkit-line-clamp: 2;
+        line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
       }
@@ -353,6 +344,7 @@
         margin-bottom: var(--spacing-2-xs);
         &.clamp {
           -webkit-line-clamp: 3;
+          line-clamp: 3;
           -webkit-box-orient: vertical;
         }
       }

src/core/carousel/components/CarouselSlideButton.tsx

@@ -25,10 +25,12 @@ export function CarouselPreviousSlideButton() {
     handleUpdateSlideProps(targetSlide);
   };
 
+  const ariaLabelTitle = title ? ` - ${title}` : '';
+
   return (
     <button
       type="button"
-      aria-label={`${previous}${title ? ` - ${title}` : ''}`}
+      aria-label={`${previous}${ariaLabelTitle}`}
       className={classNames(styles.btn, styles.btnPrev)}
       onClick={handlePrevClick}
       disabled={!isReady}
@@ -57,10 +59,12 @@ export function CarouselNextSlideButton() {
     );
   };
 
+  const ariaLabelTitle = title ? ` - ${title}` : '';
+
   return (
     <button
       type="button"
-      aria-label={`${next}${title ? ` - ${title}` : ''}`}
+      aria-label={`${next}${ariaLabelTitle}`}
       className={classNames(styles.btn, styles.btnNext)}
       onClick={handleNextClick}
       disabled={!isReady}

src/core/carousel/components/CarouselSliderPage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import styles from '../carousel.module.scss';
-import { getItemSetItemKey, getItemSetKey } from '../utils/utils';
+import { getItemSetItemKey } from '../utils/utils';
 import { MOBILE_WIDTH } from '../constants';
 import { useCarouselContext } from '../context/CarouselContext';
 
@@ -24,12 +24,6 @@ export function CarouselSliderPage({
         node && node.toggleAttribute('inert', itemSetIndex !== currentSlide)
       }
       aria-hidden={itemSetIndex !== currentSlide}
-      key={getItemSetKey(
-        itemSetIndex,
-        'id' in itemSet && typeof itemSet.id === 'string'
-          ? itemSet.id
-          : undefined,
-      )}
       className={classNames(
         styles.slide,
         itemSetIndex === currentSlide && styles.slideSelected,
@@ -40,9 +34,7 @@ export function CarouselSliderPage({
           <div
             key={getItemSetItemKey(
               itemIndex,
-              'id' in itemSet && typeof itemSet.id === 'string'
-                ? itemSet.id
-                : undefined,
+              undefined,
               `itemSet-${itemSetIndex}-item`,
             )}
             className={styles.slideItem}

src/core/imageGallery/ImagesGrid.tsx

@@ -56,6 +56,8 @@ export function ImagesGrid({
       <Grid colsCount={images.length === 1 ? 1 : columns}>
         {images.map((image, i) => (
           <ImageItem
+            // eslint-disable-next-line react/no-array-index-key
+            key={`grid-image-${i}`}
             imageId={i}
             image={image}
             lightboxUid={lightboxUid}