fix(atomic): dim unselected facet value (#4410)

Make sure to know which facet value link is selected. (applies only to
rating facets)

when no facet value is selected
<img width="395" alt="image"
src="https://github.com/user-attachments/assets/84b23df3-1e87-480a-8fee-242203ed2823">

When a facet value is selected
<img width="395" alt="image"
src="https://github.com/user-attachments/assets/00819f8c-b152-4023-b494-d24dab292346">

https://coveord.atlassian.net/browse/KIT-3472

packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.new.stories.tsx

@@ -34,3 +34,13 @@ export const Default: Story = {
   },
   decorators: [facetDecorator],
 };
+
+export const DisplayAsLink: Story = {
+  name: 'atomic-rating-facet',
+  tags: ['test'],
+  args: {
+    'attributes-display-values-as': 'link',
+    'attributes-field': 'snrating',
+  },
+  decorators: [facetDecorator],
+};

packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx

@@ -359,6 +359,7 @@ export class AtomicRatingFacet implements InitializableComponent {
   private renderValue(facetValue: NumericFacetValue, onClick: () => void) {
     const displayValue = this.formatFacetValue(facetValue);
     const isSelected = facetValue.state === 'selected';
+    const shouldBeDimmed = this.facetState.hasActiveValues && !isSelected;
     switch (this.displayValuesAs) {
       case 'checkbox':
         return (
@@ -380,6 +381,7 @@ export class AtomicRatingFacet implements InitializableComponent {
             isSelected={isSelected}
             i18n={this.bindings.i18n}
             onClick={onClick}
+            class={shouldBeDimmed ? 'opacity-80' : undefined}
           >
             {this.ratingContent(facetValue)}
           </FacetValueLink>

packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/atomic-rating-facet.e2e.ts

@@ -0,0 +1,33 @@
+import {test, expect} from './fixture';
+
+test.describe('with facet values as link', () => {
+  test.beforeEach(async ({facet}) => {
+    await facet.load({story: 'display-as-link'});
+  });
+
+  test.describe('when no value is selected', () => {
+    test('should not dim any facet values', async ({facet}) => {
+      const facetValues = await facet.facetValues.all();
+      for (let i = 0; i < facetValues.length; i++) {
+        await expect(facetValues[i]).toHaveCSS('opacity', '1');
+      }
+    });
+  });
+
+  test.describe('when selecting a value', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.getFacetValueButtonByPosition(0).click();
+    });
+
+    test('should dim unselected facet values', async ({facet}) => {
+      const facetValues = await facet.facetValues.all();
+      for (let i = 1; i < facetValues.length; i++) {
+        await expect(facetValues[i]).toHaveCSS('opacity', '1');
+      }
+    });
+
+    test('should not dim selected facet', async ({facet}) => {
+      await expect(facet.facetValues.nth(0)).toHaveCSS('opacity', '1');
+    });
+  });
+});

packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/fixture.ts

@@ -0,0 +1,19 @@
+import {test as base} from '@playwright/test';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../../playwright-utils/base-fixture';
+import {AtomicRatingFacetPageObject as Facet} from './page-object';
+
+type MyFixture = {
+  facet: Facet;
+};
+
+export const test = base.extend<MyFixture & AxeFixture>({
+  makeAxeBuilder,
+  facet: async ({page}, use) => {
+    await use(new Facet(page));
+  },
+});
+
+export {expect} from '@playwright/test';

packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/page-object.ts

@@ -0,0 +1,29 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class AtomicRatingFacetPageObject extends BasePageObject<'atomic-rating-facet'> {
+  constructor(page: Page) {
+    super(page, 'atomic-rating-facet');
+  }
+
+  getFacetValueByPosition(valuePosition: number) {
+    return this.facetValues.nth(valuePosition);
+  }
+
+  getFacetValueButtonByPosition(valuePosition: number) {
+    const value = this.getFacetValueByPosition(valuePosition);
+    return value.locator('button');
+  }
+
+  get clearFilter() {
+    return this.page.getByRole('button').filter({hasText: /Clear.*filter/});
+  }
+
+  get getSelectedFacetValueLink() {
+    return this.page.locator('[part="value-link value-link-selected"]');
+  }
+
+  get facetValues() {
+    return this.page.getByRole('listitem');
+  }
+}