feat(UI): adding variants for featured extension component (podman-de…

…sktop#6721) Signed-off-by: axel7083 <[email protected]>
axel7083 · Apr 9, 2024 · cc4ccc0 · cc4ccc0
1 parent c349402
commit cc4ccc0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/packages/renderer/src/lib/featured/FeaturedExtension.spec.ts b/packages/renderer/src/lib/featured/FeaturedExtension.spec.ts
@@ -19,7 +19,7 @@
 import '@testing-library/jest-dom/vitest';
 
 import { render, screen } from '@testing-library/svelte';
-import { expect, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 
 import FeaturedExtension from '/@/lib/featured/FeaturedExtension.svelte';
 
@@ -60,6 +60,53 @@ const notFetchableFeaturedExtension: IFeaturedExtension = {
   installed: false,
 };
 
+function assertPrimary(component: HTMLElement) {
+  expect(component).toBeDefined();
+  expect(component).toHaveClass('bg-[var(--pd-card-bg)]');
+  expect(component).toHaveClass('border-[var(--pd-card-bg)]');
+  expect(component).not.toHaveClass('bg-[var(--pd-invert-content-card-bg)]');
+  expect(component).not.toHaveClass('border-[var(--pd-invert-content-card-bg)]');
+}
+
+function assertSecondary(component: HTMLElement) {
+  expect(component).toBeDefined();
+  expect(component).not.toHaveClass('bg-[var(--pd-card-bg)]');
+  expect(component).not.toHaveClass('border-[var(--pd-card-bg)]');
+  expect(component).toHaveClass('bg-[var(--pd-invert-content-card-bg)]');
+  expect(component).toHaveClass('border-[var(--pd-invert-content-card-bg)]');
+}
+
+describe('variants', () => {
+  test('default should be primary', () => {
+    render(FeaturedExtension, {
+      featuredExtension: fetchableFeaturedExtension,
+    });
+
+    const card = screen.getByLabelText(fetchableFeaturedExtension.displayName);
+    assertPrimary(card);
+  });
+
+  test('primary should have proper classes', () => {
+    render(FeaturedExtension, {
+      featuredExtension: fetchableFeaturedExtension,
+      variant: 'primary',
+    });
+
+    const card = screen.getByLabelText(fetchableFeaturedExtension.displayName);
+    assertPrimary(card);
+  });
+
+  test('secondary should have proper classes', () => {
+    render(FeaturedExtension, {
+      featuredExtension: fetchableFeaturedExtension,
+      variant: 'secondary',
+    });
+
+    const card = screen.getByLabelText(fetchableFeaturedExtension.displayName);
+    assertSecondary(card);
+  });
+});
+
 test('Expect featured extension to show install button', () => {
   render(FeaturedExtension, {
     featuredExtension: fetchableFeaturedExtension,

diff --git a/packages/renderer/src/lib/featured/FeaturedExtension.svelte b/packages/renderer/src/lib/featured/FeaturedExtension.svelte
@@ -6,12 +6,16 @@ import type { FeaturedExtension } from '../../../../main/src/plugin/featured/fea
 import FeaturedExtensionDownload from './FeaturedExtensionDownload.svelte';
 
 export let featuredExtension: FeaturedExtension;
+export let variant: 'primary' | 'secondary' = 'primary';
 </script>
 
 <div
   title="{featuredExtension.description}"
-  class="rounded-md
-               bg-charcoal-800 flex flex-row justify-center p-4 h-20 border-2 border-charcoal-800 hover:border-dustypurple-500"
+  class:bg-[var(--pd-card-bg)]="{variant === 'primary'}"
+  class:border-[var(--pd-card-bg)]="{variant === 'primary'}"
+  class:bg-[var(--pd-invert-content-card-bg)]="{variant === 'secondary'}"
+  class:border-[var(--pd-invert-content-card-bg)]="{variant === 'secondary'}"
+  class="rounded-md flex flex-row justify-center p-4 h-20 border-2 hover:border-dustypurple-500"
   aria-label="{featuredExtension.displayName}">
   <div class=" flex flex-col flex-1">
     <div class="flex flex-row place-items-center flex-1">