chore: hover on carousel arrows (podman-desktop#6284)

* chore: hover on carousel arrows Signed-off-by: Philippe Martin <[email protected]> * test: add unit test Signed-off-by: Philippe Martin <[email protected]>
feloy · Mar 6, 2024 · 0a81a3d · 0a81a3d
1 parent 0008166
commit 0a81a3d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/renderer/src/lib/carousel/Carousel.spec.ts b/packages/renderer/src/lib/carousel/Carousel.spec.ts
@@ -129,3 +129,22 @@ test('carousel left and right buttons enabled when all items does not fit into s
   expect(left).toBeDisabled();
   expect(right).toBeDisabled();
 });
+
+test('left and right buttons have hover class', async () => {
+  render(CarouselTest);
+  const card1 = screen.getByText('card 1');
+  console.log(window.innerWidth);
+  expect(card1).toBeVisible();
+
+  let cards = screen.queryAllByText('card 2');
+  expect(cards.length).toBe(0);
+
+  cards = screen.queryAllByText('card 3');
+  expect(cards.length).toBe(0);
+
+  const left = screen.getByRole('button', { name: 'Rotate left' });
+  const right = screen.getByRole('button', { name: 'Rotate right' });
+
+  expect(left).toHaveClass(/^hover:bg-/);
+  expect(right).toHaveClass(/^hover:bg-/);
+});
diff --git a/packages/renderer/src/lib/carousel/Carousel.svelte b/packages/renderer/src/lib/carousel/Carousel.svelte
@@ -49,7 +49,7 @@ function rotateRight() {
     id="left"
     on:click="{rotateLeft}"
     aria-label="Rotate left"
-    class="h-8 w-8 mr-3 bg-gray-800 rounded-full disabled:bg-charcoal-700"
+    class="h-8 w-8 mr-3 bg-gray-800 hover:bg-gray-600 rounded-full disabled:bg-charcoal-700"
     disabled="{visibleCards.length === cards.length}">
     <Fa class="w-8 h-8" icon="{faChevronLeft}" color="black" />
   </button>
@@ -64,7 +64,7 @@ function rotateRight() {
     id="right"
     on:click="{rotateRight}"
     aria-label="Rotate right"
-    class="h-8 w-8 ml-3 bg-gray-800 rounded-full disabled:bg-charcoal-700"
+    class="h-8 w-8 ml-3 bg-gray-800 hover:bg-gray-600 rounded-full disabled:bg-charcoal-700"
     disabled="{visibleCards.length === cards.length}">
     <Fa class="h-8 w-8" icon="{faChevronRight}" color="black" />
   </button>