diff --git a/packages/atomic/src/components/common/facets/timeframe-facet-common.tsx b/packages/atomic/src/components/common/facets/timeframe-facet-common.tsx
index 038cc66df08..a142bde1621 100644
--- a/packages/atomic/src/components/common/facets/timeframe-facet-common.tsx
+++ b/packages/atomic/src/components/common/facets/timeframe-facet-common.tsx
@@ -47,7 +47,7 @@ interface TimeframeFacetCommonOptions {
withDatePicker: boolean;
setFacetId(id: string): string;
getSearchStatusState(): SearchStatusState;
- buildDependenciesManager(): FacetConditionsManager;
+ buildDependenciesManager(facetId: string): FacetConditionsManager;
deserializeRelativeDate(date: string): RelativeDate;
buildDateRange(config: DateRangeOptions): DateRangeRequest;
initializeFacetForDatePicker(): DateFacet;
@@ -72,7 +72,9 @@ export class TimeframeFacetCommon {
private facetForDateRange?: DateFacet;
private filter?: DateFilter;
private manualTimeframes: Timeframe[] = [];
- private dependenciesManager?: FacetConditionsManager;
+ private facetForDateRangeDependenciesManager?: FacetConditionsManager;
+ private facetForDatePickerDependenciesManager?: FacetConditionsManager;
+ private filterDependenciesManager?: FacetConditionsManager;
constructor(private props: TimeframeFacetCommonOptions) {
this.facetId = this.determineFacetId;
@@ -93,12 +95,26 @@ export class TimeframeFacetCommon {
if (this.props.withDatePicker) {
this.facetForDatePicker = this.props.initializeFacetForDatePicker();
+ this.facetForDatePickerDependenciesManager =
+ this.props.buildDependenciesManager(
+ this.facetForDatePicker.state.facetId
+ );
this.filter = this.props.initializeFilter();
}
- if (this.facetForDateRange || this.filter) {
- this.dependenciesManager = this.props.buildDependenciesManager();
+ if (this.facetForDateRange) {
+ this.facetForDateRangeDependenciesManager =
+ this.props.buildDependenciesManager(
+ this.facetForDateRange?.state.facetId
+ );
}
+
+ if (this.filter) {
+ this.filterDependenciesManager = this.props.buildDependenciesManager(
+ this.filter?.state.facetId
+ );
+ }
+
this.registerFacetToStore();
}
@@ -189,7 +205,9 @@ export class TimeframeFacetCommon {
if (this.props.host.isConnected) {
return;
}
- this.dependenciesManager?.stopWatching();
+ this.facetForDateRangeDependenciesManager?.stopWatching();
+ this.facetForDatePickerDependenciesManager?.stopWatching();
+ this.filterDependenciesManager?.stopWatching();
}
private get isHidden() {
diff --git a/packages/atomic/src/components/insight/atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.tsx b/packages/atomic/src/components/insight/atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.tsx
index c59a3e9816c..7c6fa398536 100644
--- a/packages/atomic/src/components/insight/atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.tsx
+++ b/packages/atomic/src/components/insight/atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.tsx
@@ -142,10 +142,9 @@ export class AtomicInsightTimeframeFacet
dependsOn: this.dependsOn,
withDatePicker: this.withDatePicker,
setFacetId: (id: string) => (this.facetId = id),
- buildDependenciesManager: () =>
+ buildDependenciesManager: (facetId: string) =>
buildInsightFacetConditionsManager(this.bindings.engine, {
- facetId:
- this.facetForDateRange?.state.facetId ?? this.filter!.state.facetId,
+ facetId,
conditions: parseDependsOn<
InsightFacetValueRequest | InsightCategoryFacetValueRequest
>(this.dependsOn),
diff --git a/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.new.stories.tsx b/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.new.stories.tsx
index 2d427dafa57..2c427cb57aa 100644
--- a/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.new.stories.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.new.stories.tsx
@@ -3,8 +3,17 @@ import {facetDecorator} from '@/storybook-utils/common/facets-decorator';
import {renderComponent} from '@/storybook-utils/common/render-component';
import {wrapInSearchInterface} from '@/storybook-utils/search/search-interface-wrapper';
import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit-html';
+import {within} from 'shadow-dom-testing-library';
-const {decorator, play} = wrapInSearchInterface();
+const {decorator, play} = wrapInSearchInterface({
+ preprocessRequest: (r) => {
+ const parsed = JSON.parse(r.body as string);
+ parsed.aq = '@filetype==("YouTubeVideo")';
+ r.body = JSON.stringify(parsed);
+ return r;
+ },
+});
const meta: Meta = {
component: 'atomic-numeric-facet',
@@ -34,3 +43,49 @@ export const Default: Story = {
'attributes-field': 'ytviewcount',
},
};
+
+export const WithDependsOn: Story = {
+ name: 'atomic-numeric-facet-with-depends-on',
+ tags: ['test'],
+ decorators: [
+ (story, context) =>
+ html`
+
+ ${story({})}
+ `,
+ ],
+ argTypes: {
+ 'attributes-depends-on-filetype': {
+ name: 'depends-on-filetype',
+ control: {type: 'text'},
+ },
+ },
+ args: {
+ 'attributes-label': 'YouTube View Count (Dependent facet)',
+ 'attributes-field': 'ytviewcount',
+ 'attributes-with-input': 'integer',
+ 'attributes-depends-on-filetype': 'YouTubeVideo',
+ },
+ play: async (context) => {
+ const {canvasElement, step} = context;
+ const canvas = within(canvasElement);
+ await play(context);
+ await step('Select YouTubeVideo in filetype facet', async () => {
+ const button = await canvas.findByShadowLabelText(
+ 'Inclusion filter on YouTubeVideo',
+ {exact: false}
+ );
+ button.ariaChecked === 'false' ? button.click() : null;
+ });
+ },
+};
diff --git a/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx b/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx
index 22af28df62d..db4f8002c38 100644
--- a/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx
@@ -94,7 +94,9 @@ export class AtomicNumericFacet implements InitializableComponent {
@Element() private host!: HTMLElement;
private manualRanges: (NumericRangeRequest & {label?: string})[] = [];
private formatter: NumberFormatter = defaultNumberFormatter;
- private dependenciesManager?: FacetConditionsManager;
+ private facetForRangeDependenciesManager?: FacetConditionsManager;
+ private facetForInputDependenciesManager?: FacetConditionsManager;
+ private filterDependenciesManager?: FacetConditionsManager;
@BindStateToController('facetForRange')
@State()
@@ -244,9 +246,7 @@ export class AtomicNumericFacet implements InitializableComponent {
this.initializeFacetForInput();
this.initializeFacetForRange();
this.initializeFilter();
- this.initializeDependenciesManager();
this.initializeSearchStatus();
-
this.registerFacetToStore();
}
@@ -254,7 +254,9 @@ export class AtomicNumericFacet implements InitializableComponent {
if (this.host.isConnected) {
return;
}
- this.dependenciesManager?.stopWatching();
+ this.facetForRangeDependenciesManager?.stopWatching();
+ this.facetForInputDependenciesManager?.stopWatching();
+ this.filterDependenciesManager?.stopWatching();
}
private initializeSearchStatus() {
@@ -284,6 +286,10 @@ export class AtomicNumericFacet implements InitializableComponent {
},
});
+ this.facetForInputDependenciesManager = this.initializeDependenciesManager(
+ this.facetForInput.state.facetId
+ );
+
return this.facetForInput;
}
@@ -313,6 +319,10 @@ export class AtomicNumericFacet implements InitializableComponent {
},
});
+ this.facetForRangeDependenciesManager = this.initializeDependenciesManager(
+ this.facetForRange.state.facetId
+ );
+
return this.facetForRange;
}
@@ -326,21 +336,21 @@ export class AtomicNumericFacet implements InitializableComponent {
field: this.field,
},
});
- }
- private initializeDependenciesManager() {
- this.dependenciesManager = buildFacetConditionsManager(
- this.bindings.engine,
- {
- facetId:
- this.facetForRange?.state.facetId ?? this.filter!.state.facetId,
- conditions: parseDependsOn<
- FacetValueRequest | CategoryFacetValueRequest
- >(this.dependsOn),
- }
+ this.filterDependenciesManager = this.initializeDependenciesManager(
+ this.filter.state.facetId
);
}
+ private initializeDependenciesManager(facetId: string) {
+ return buildFacetConditionsManager(this.bindings.engine, {
+ facetId,
+ conditions: parseDependsOn(
+ this.dependsOn
+ ),
+ });
+ }
+
private registerFacetToStore() {
const facetInfo: FacetInfo = {
label: () => this.bindings.i18n.t(this.label),
diff --git a/packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/atomic-numeric-facet.e2e.ts b/packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/atomic-numeric-facet.e2e.ts
new file mode 100644
index 00000000000..a76671d9d3e
--- /dev/null
+++ b/packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/atomic-numeric-facet.e2e.ts
@@ -0,0 +1,104 @@
+import {test, expect} from './fixture';
+
+test.describe('when a "depends-on" prop is provided', () => {
+ test.beforeEach(async ({facet}) => {
+ await facet.load({story: 'with-depends-on'});
+ await facet.facet.waitFor({state: 'visible'});
+ });
+
+ test('when the specified dependency is selected in the parent facet, dependent facet should be visible', async ({
+ facet,
+ }) => {
+ expect(facet.facet).toBeVisible();
+ });
+
+ test.describe('when the specified dependency is cleared from the parent facet', () => {
+ test('dependent facet should not be visible', async ({facet}) => {
+ const parent = facet.page.getByTestId('parent-facet');
+ await parent.getByLabel('Inclusion filter on YouTubeVideo').click();
+
+ expect(facet.facet).not.toBeVisible();
+ });
+
+ test('should clear previously selected dependent facet range', async ({
+ facet,
+ }) => {
+ await facet.facetValues.first().click();
+
+ const breadbox = facet.page.getByTestId('breadbox');
+ expect(breadbox).toBeVisible();
+
+ const parent = facet.page.getByTestId('parent-facet');
+ await parent.getByLabel('Inclusion filter on YouTubeVideo').click();
+
+ await breadbox.waitFor({state: 'hidden'});
+ expect(breadbox).not.toBeVisible();
+ });
+ test('should clear previously selected dependent facet input range', async ({
+ facet,
+ }) => {
+ await facet.facetInputStart.fill('900000');
+ await facet.facetInputEnd.fill('90000000');
+ await facet.facetApplyButton.click();
+
+ const breadbox = facet.page.getByTestId('breadbox');
+ expect(breadbox).toBeVisible();
+
+ const parent = facet.page.getByTestId('parent-facet');
+ await parent.getByLabel('Inclusion filter on YouTubeVideo').click();
+
+ await breadbox.waitFor({state: 'hidden'});
+ expect(breadbox).not.toBeVisible();
+ });
+ });
+
+ test.describe('when the specified dependency is cleared from the breadbox', () => {
+ test('dependent facet should not be visible', async ({facet}) => {
+ const breadbox = facet.page.getByTestId('breadbox');
+ await breadbox
+ .getByLabel(
+ 'Remove inclusion filter on File Type (Parent facet): YouTubeVideo'
+ )
+ .click();
+
+ expect(facet.facet).not.toBeVisible();
+ });
+
+ test('should clear previously selected dependent facet range', async ({
+ facet,
+ }) => {
+ await facet.facetValues.first().click();
+
+ const breadbox = facet.page.getByTestId('breadbox');
+ expect(breadbox).toBeVisible();
+
+ await breadbox
+ .getByLabel(
+ 'Remove inclusion filter on File Type (Parent facet): YouTubeVideo'
+ )
+ .click();
+
+ await breadbox.waitFor({state: 'hidden'});
+ expect(breadbox).not.toBeVisible();
+ });
+ test('should clear previously selected dependent facet input range', async ({
+ facet,
+ }) => {
+ await facet.facetInputStart.fill('900000');
+ await facet.facetInputEnd.fill('90000000');
+ await facet.facetApplyButton.click();
+
+ const breadbox = facet.page.getByTestId('breadbox');
+ expect(breadbox).toBeVisible();
+
+ await breadbox
+ .getByLabel(
+ 'Remove inclusion filter on File Type (Parent facet): YouTubeVideo'
+ )
+ .click();
+
+ await breadbox.waitFor({state: 'hidden'});
+ expect(breadbox).not.toBeVisible();
+ });
+ });
+});
diff --git a/packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/fixture.ts b/packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/fixture.ts
new file mode 100644
index 00000000000..ce4d74df9ad
--- /dev/null
+++ b/packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/fixture.ts
@@ -0,0 +1,19 @@
+import {test as base} from '@playwright/test';
+import {
+ AxeFixture,
+ makeAxeBuilder,
+} from '../../../../../../playwright-utils/base-fixture';
+import {AtomicNumericFacetPageObject as Facet} from './page-object';
+
+type MyFixture = {
+ facet: Facet;
+};
+
+export const test = base.extend({
+ makeAxeBuilder,
+ facet: async ({page}, use) => {
+ await use(new Facet(page));
+ },
+});
+
+export {expect} from '@playwright/test';
diff --git a/packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/page-object.ts b/packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/page-object.ts
new file mode 100644
index 00000000000..709d26953cc
--- /dev/null
+++ b/packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/page-object.ts
@@ -0,0 +1,32 @@
+import {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class AtomicNumericFacetPageObject extends BasePageObject<'atomic-numeric-facet'> {
+ constructor(page: Page) {
+ super(page, 'atomic-numeric-facet');
+ }
+
+ get facet() {
+ return this.page.locator('atomic-numeric-facet');
+ }
+
+ get facetInputStart() {
+ return this.facet.getByLabel('Enter a minimum numerical value');
+ }
+
+ get facetInputEnd() {
+ return this.facet.getByLabel('Enter a maximum numerical value');
+ }
+
+ get facetApplyButton() {
+ return this.facet.getByLabel('Apply custom numerical values');
+ }
+
+ get facetClearFilterButton() {
+ return this.facet.getByRole('button').filter({hasText: 'Clear filter'});
+ }
+
+ get facetValues() {
+ return this.facet.locator('[part="value-checkbox"]');
+ }
+}
diff --git a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.new.stories.tsx b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.new.stories.tsx
index 93272de618d..2463e46775c 100644
--- a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.new.stories.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.new.stories.tsx
@@ -3,8 +3,17 @@ import {facetDecorator} from '@/storybook-utils/common/facets-decorator';
import {renderComponent} from '@/storybook-utils/common/render-component';
import {wrapInSearchInterface} from '@/storybook-utils/search/search-interface-wrapper';
import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit-html';
+import {within} from 'shadow-dom-testing-library';
-const {decorator, play} = wrapInSearchInterface();
+const {decorator, play} = wrapInSearchInterface({
+ preprocessRequest: (r) => {
+ const parsed = JSON.parse(r.body as string);
+ parsed.aq = '@filetype==("YouTubeVideo")';
+ r.body = JSON.stringify(parsed);
+ return r;
+ },
+});
const meta: Meta = {
component: 'atomic-timeframe-facet',
@@ -20,6 +29,16 @@ const meta: Meta = {
type: 'string',
},
},
+ args: {
+ 'slots-default': `
+
+
+
+
+
+
+ `,
+ },
render: renderComponent,
decorators: [decorator],
parameters,
@@ -31,14 +50,49 @@ export default meta;
export const Default: Story = {
name: 'atomic-timeframe-facet',
decorators: [facetDecorator],
+};
+
+export const WithDependsOn: Story = {
+ name: 'atomic-timeframe-facet-with-depends-on',
+ tags: ['test'],
+ decorators: [
+ (story, context) =>
+ html`
+
+ ${story({})}
+ `,
+ ],
+ argTypes: {
+ 'attributes-depends-on-filetype': {
+ name: 'depends-on-filetype',
+ control: {type: 'text'},
+ },
+ },
args: {
- 'slots-default': `
-
-
-
-
-
-
- `,
+ 'attributes-label': 'Timeframe (Dependent facet)',
+ 'attributes-with-date-picker': true,
+ 'attributes-depends-on-filetype': 'YouTubeVideo',
+ },
+ play: async (context) => {
+ const {canvasElement, step} = context;
+ const canvas = within(canvasElement);
+ await play(context);
+ await step('Select YouTubeVideo in filetype facet', async () => {
+ const button = await canvas.findByShadowLabelText(
+ 'Inclusion filter on YouTubeVideo',
+ {exact: false}
+ );
+ button.ariaChecked === 'false' ? button.click() : null;
+ });
},
};
diff --git a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx
index a9d6ea78817..6ca7994549c 100644
--- a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx
+++ b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.tsx
@@ -232,10 +232,9 @@ export class AtomicTimeframeFacet implements InitializableComponent {
dependsOn: parseDependsOn(this.dependsOn) && this.dependsOn,
withDatePicker: this.withDatePicker,
setFacetId: (id: string) => (this.facetId = id),
- buildDependenciesManager: () =>
+ buildDependenciesManager: (facetId: string) =>
buildFacetConditionsManager(this.bindings.engine, {
- facetId:
- this.facetForDateRange?.state.facetId ?? this.filter!.state.facetId,
+ facetId,
conditions: parseDependsOn<
FacetValueRequest | CategoryFacetValueRequest
>(this.dependsOn),
diff --git a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/e2e/atomic-timeframe-facet.e2e.ts b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/e2e/atomic-timeframe-facet.e2e.ts
index 5aa38bf88b7..bfe7f1c4794 100644
--- a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/e2e/atomic-timeframe-facet.e2e.ts
+++ b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/e2e/atomic-timeframe-facet.e2e.ts
@@ -42,12 +42,12 @@ test.describe('default', () => {
test.describe('when clicking the apply button', () => {
test.beforeEach(async ({facet}) => {
await facet.facetApplyButton.click();
- await facet.facetClearFilter.waitFor({state: 'visible'});
+ await facet.facetClearFilterButton.waitFor({state: 'visible'});
});
test.describe('when clicking the clear filter button', () => {
test.beforeEach(async ({facet}) => {
- await facet.facetClearFilter.click();
+ await facet.facetClearFilterButton.click();
});
test('should clear the selected dates', async ({facet}) => {
@@ -66,7 +66,7 @@ test.describe('default', () => {
});
test('should hide the clear filter button', async ({facet}) => {
- await expect(facet.facetClearFilter).not.toBeVisible();
+ await expect(facet.facetClearFilterButton).not.toBeVisible();
});
});
});
@@ -131,7 +131,7 @@ test.describe('with min and max values', () => {
test.describe('when clicking the clear filter button', () => {
test.beforeEach(async ({facet}) => {
- await facet.facetClearFilter.click();
+ await facet.facetClearFilterButton.click();
});
test('should clear the selected dates', async ({facet}) => {
@@ -153,7 +153,7 @@ test.describe('with min and max values', () => {
});
test('should hide the clear filter button', async ({facet}) => {
- await expect(facet.facetClearFilter).not.toBeVisible();
+ await expect(facet.facetClearFilterButton).not.toBeVisible();
});
});
});
@@ -169,3 +169,106 @@ test.describe('with min and max values', () => {
await expect(facet.facetInputEnd).toHaveAttribute('max', '2021-01-31');
});
});
+
+test.describe('when a "depends-on" prop is provided', () => {
+ test.beforeEach(async ({facet}) => {
+ await facet.load({story: 'with-depends-on'});
+ await facet.facet.waitFor({state: 'visible'});
+ });
+
+ test('when the specified dependency is selected in the parent facet, dependent facet should be visible', async ({
+ facet,
+ }) => {
+ expect(facet.facet).toBeVisible();
+ });
+
+ test.describe('when the specified dependency is cleared from the parent facet', () => {
+ test('dependent facet should not be visible', async ({facet}) => {
+ const parent = facet.page.getByTestId('parent-facet');
+ await parent.locator('[part="clear-button"]').click();
+
+ expect(facet.facet).not.toBeVisible();
+ });
+
+ test('should clear previously selected dependent facet range', async ({
+ facet,
+ }) => {
+ await facet.facetValues.first().click();
+
+ const breadbox = facet.page.getByTestId('breadbox');
+ expect(breadbox).toBeVisible();
+
+ const parent = facet.page.getByTestId('parent-facet');
+ await parent.locator('[part="clear-button"]').click();
+
+ await breadbox.waitFor({state: 'hidden'});
+ expect(breadbox).not.toBeVisible();
+ });
+ test('should clear previously selected dependent facet input range', async ({
+ facet,
+ }) => {
+ await facet.facetInputStart.fill('2025-01-01');
+ await facet.facetInputEnd.fill('2025-02-01');
+ await facet.facetApplyButton.click();
+
+ const breadbox = facet.page.getByTestId('breadbox');
+ expect(breadbox).toBeVisible();
+
+ const parent = facet.page.getByTestId('parent-facet');
+ await parent.locator('[part="clear-button"]').click();
+
+ await breadbox.waitFor({state: 'hidden'});
+ expect(breadbox).not.toBeVisible();
+ });
+ });
+
+ test.describe('when the specified dependency is cleared from the breadbox', () => {
+ test('dependent facet should not be visible', async ({facet}) => {
+ const breadbox = facet.page.getByTestId('breadbox');
+ await breadbox
+ .getByLabel(
+ 'Remove inclusion filter on File Type (Parent facet): YouTubeVideo'
+ )
+ .click();
+
+ expect(facet.facet).not.toBeVisible();
+ });
+
+ test('should clear previously selected dependent facet range', async ({
+ facet,
+ }) => {
+ await facet.facetValues.first().click();
+
+ const breadbox = facet.page.getByTestId('breadbox');
+ expect(breadbox).toBeVisible();
+
+ await breadbox
+ .getByLabel(
+ 'Remove inclusion filter on File Type (Parent facet): YouTubeVideo'
+ )
+ .click();
+
+ await breadbox.waitFor({state: 'hidden'});
+ expect(breadbox).not.toBeVisible();
+ });
+ test('should clear previously selected dependent facet input range', async ({
+ facet,
+ }) => {
+ await facet.facetInputStart.fill('2025-01-01');
+ await facet.facetInputEnd.fill('2025-02-01');
+ await facet.facetApplyButton.click();
+
+ const breadbox = facet.page.getByTestId('breadbox');
+ expect(breadbox).toBeVisible();
+
+ await breadbox
+ .getByLabel(
+ 'Remove inclusion filter on File Type (Parent facet): YouTubeVideo'
+ )
+ .click();
+
+ await breadbox.waitFor({state: 'hidden'});
+ expect(breadbox).not.toBeVisible();
+ });
+ });
+});
diff --git a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/e2e/page-object.ts b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/e2e/page-object.ts
index 781f15db3c8..3e11f8f7219 100644
--- a/packages/atomic/src/components/search/facets/atomic-timeframe-facet/e2e/page-object.ts
+++ b/packages/atomic/src/components/search/facets/atomic-timeframe-facet/e2e/page-object.ts
@@ -6,33 +6,29 @@ export class AtomicTimeframeFacetPageObject extends BasePageObject<'atomic-timef
super(page, 'atomic-timeframe-facet');
}
- get getFacetSearch() {
- return this.page.getByLabel('Search');
+ get facet() {
+ return this.page.locator('atomic-timeframe-facet');
}
get facetInputStart() {
- return this.page.getByLabel('Enter a start date for the No label facet');
+ return this.facet.getByLabel('Enter a start date');
}
get facetInputEnd() {
- return this.page.getByLabel('Enter an end date for the No label facet');
+ return this.facet.getByLabel('Enter an end date');
}
get facetApplyButton() {
- return this.page.getByRole('button', {
- name: 'Apply custom start and end dates for the No label facet',
+ return this.facet.getByRole('button', {
+ name: 'Apply custom start and end dates',
});
}
- get facetClearFilter() {
- return this.page.getByRole('button').filter({hasText: 'Clear filter'});
+ get facetValues() {
+ return this.facet.getByLabel('Inclusion filter on');
}
- get getFacetValue() {
- return this.page.locator('[part="value-box"]');
- }
-
- get facetSearchMoreMatchesFor() {
- return this.page.getByRole('button', {name: 'More matches for p'});
+ get facetClearFilterButton() {
+ return this.facet.getByRole('button').filter({hasText: 'Clear filter'});
}
}
diff --git a/packages/atomic/storybook-utils/common/render-component.tsx b/packages/atomic/storybook-utils/common/render-component.tsx
index dd6b0028d91..3ca4b664a8a 100644
--- a/packages/atomic/storybook-utils/common/render-component.tsx
+++ b/packages/atomic/storybook-utils/common/render-component.tsx
@@ -27,6 +27,10 @@ const renderComponentInternal =
case 'slots':
slotsControls.push(argKey);
break;
+ default:
+ if (argKey.startsWith('attributes-depends-on-')) {
+ attributeControls.push(argKey);
+ }
}
}
const styleContent = unsafeStatic(