feat(foxy-store-card): add active/inactive status indicator

src/elements/public/StoreCard/StoreCard.test.ts

@@ -95,4 +95,25 @@ describe('StoreCard', () => {
 
     expect(await getByTestId(element, 'subtitle')).to.include.text('example.com');
   });
+
+  it('renders store activity status in the subtitle', async () => {
+    const router = createRouter();
+    const href = 'https://demo.api/hapi/stores/0';
+    const element = await fixture<StoreCard>(html`
+      <foxy-store-card href=${href} @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}>
+      </foxy-store-card>
+    `);
+
+    await waitUntil(() => !!element.data, undefined, { timeout: 5000 });
+    element.data = { ...element.data!, is_active: true };
+    await element.requestUpdate();
+    const subtitle = await getByTestId(element, 'subtitle');
+    expect(subtitle?.querySelector('[aria-label="status_active"]')).to.exist;
+    expect(subtitle?.querySelector('[aria-label="status_inactive"]')).to.not.exist;
+
+    element.data = { ...element.data!, is_active: false };
+    await element.requestUpdate();
+    expect(subtitle?.querySelector('[aria-label="status_active"]')).to.not.exist;
+    expect(subtitle?.querySelector('[aria-label="status_inactive"]')).to.exist;
+  });
 });

src/elements/public/StoreCard/StoreCard.ts

@@ -4,6 +4,7 @@ import type { Data } from './types';
 
 import { TranslatableMixin } from '../../../mixins/translatable';
 import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
+import { classMap } from '../../../utils/class-map';
 import { html } from 'lit-html';
 
 const NS = 'store-card';
@@ -32,7 +33,18 @@ export class StoreCard extends Base<Data> {
       subtitle: data => {
         const defaultD = this.defaultDomain;
         const domain = data?.store_domain;
-        return html`${domain?.includes('.') || !defaultD ? domain : `${domain}.${defaultD}`}`;
+        return html`
+          <span
+            aria-label=${this.t(`status_${data.is_active ? 'active' : 'inactive'}`)}
+            style="width: 0.55em; height: 0.55em"
+            class=${classMap({
+              'inline-block flex-shrink-0 rounded-full': true,
+              'bg-success': data.is_active,
+              'border border-contrast-50': !data.is_active,
+            })}
+          ></span>
+          ${domain?.includes('.') || !defaultD ? domain : `${domain}.${defaultD}`}
+        `;
       },
     });
   }

src/static/translations/store-card/en.json

@@ -1,7 +1,9 @@
 {
+  "status_active": "Active",
+  "status_inactive": "Inactive",
   "spinner": {
     "loading_busy": "Loading",
     "loading_empty": "No data",
     "loading_error": "Unknown error"
   }
-}
+}