diff --git a/pages/toggle_action_button.html b/pages/toggle_action_button.html index 3cc7ba42..53fb5749 100644 --- a/pages/toggle_action_button.html +++ b/pages/toggle_action_button.html @@ -29,11 +29,23 @@

Toggle Button


+ +
+ +
+

Toggle Button (legacy options)

+
diff --git a/src/components/ActionButton/ToggleActionButton.ts b/src/components/ActionButton/ToggleActionButton.ts index 331e99a2..1475d369 100644 --- a/src/components/ActionButton/ToggleActionButton.ts +++ b/src/components/ActionButton/ToggleActionButton.ts @@ -2,10 +2,10 @@ import { ComponentOptions, IResultsComponentBindings, Component, Initialization import { ActionButton } from './ActionButton'; export interface IToggleActionButtonOptions { - activatedIcon: string; - activatedTooltip: string; - deactivatedIcon: string; - deactivatedTooltip: string; + activateIcon: string; + activateTooltip: string; + deactivateIcon: string; + deactivateTooltip: string; click?: () => void; activate?: () => void; deactivate?: () => void; @@ -17,7 +17,8 @@ export class ToggleActionButton extends Component { static options: IToggleActionButtonOptions = { /** - * Specifies the button icon when the button is activated. + * Specifies the button SVG icon displayed to activate the button. + * Note: The SVG markup has to be HTML encoded when set using the HTML attributes. * * Default is the empty string. * @@ -30,25 +31,24 @@ export class ToggleActionButton extends Component { * The attribute would be set like this: * * ```html - * + * * ``` */ - activatedIcon: ComponentOptions.buildStringOption(), + activateIcon: ComponentOptions.buildStringOption({ alias: 'deactivatedIcon' }), /** - * Specifies the button tooltip when the button is activated. + * Specifies the button tooltip text displayed to activate the button. * * Default is the empty string. * * ```html - * + * * ``` */ - activatedTooltip: ComponentOptions.buildStringOption(), + activateTooltip: ComponentOptions.buildStringOption({ alias: 'deactivatedTooltip' }), /** - * Specifies the button SVG icon when the button is deactivated. - * Note: The SVG markup has to be HTML encoded when set using the HTML attributes. + * Specifies the button icon displayed to deactivate the button. * * Default is the empty string. * @@ -61,21 +61,21 @@ export class ToggleActionButton extends Component { * The attribute would be set like this: * * ```html - * + * * ``` */ - deactivatedIcon: ComponentOptions.buildStringOption(), + deactivateIcon: ComponentOptions.buildStringOption({ alias: 'activatedIcon' }), /** - * Specifies the button tooltip text when the button is deactivated. + * Specifies the button tooltip displayed to deactivate the button. * * Default is the empty string. * * ```html - * + * * ``` */ - deactivatedTooltip: ComponentOptions.buildStringOption(), + deactivateTooltip: ComponentOptions.buildStringOption({ alias: 'activatedTooltip' }), /** * Specifies the handler called when the button is clicked. @@ -152,8 +152,8 @@ export class ToggleActionButton extends Component { this.innerActionButton = new ActionButton( this.element, { - icon: this.options.deactivatedIcon, - tooltip: this.options.deactivatedTooltip, + icon: this.options.activateIcon, + tooltip: this.options.activateTooltip, click: () => this.onClick() }, bindings @@ -167,14 +167,14 @@ export class ToggleActionButton extends Component { this.element.classList.add(ToggleActionButton.ACTIVATED_CLASS_NAME); this.element.setAttribute('aria-pressed', 'true'); - this.innerActionButton.updateIcon(this.options.activatedIcon); - this.innerActionButton.updateTooltip(this.options.activatedTooltip); + this.innerActionButton.updateIcon(this.options.deactivateIcon); + this.innerActionButton.updateTooltip(this.options.deactivateTooltip); } else { this.element.classList.remove(ToggleActionButton.ACTIVATED_CLASS_NAME); this.element.setAttribute('aria-pressed', 'false'); - this.innerActionButton.updateIcon(this.options.deactivatedIcon); - this.innerActionButton.updateTooltip(this.options.deactivatedTooltip); + this.innerActionButton.updateIcon(this.options.activateIcon); + this.innerActionButton.updateTooltip(this.options.activateTooltip); } } } diff --git a/tests/components/ActionButton/ToggleActionButton.spec.ts b/tests/components/ActionButton/ToggleActionButton.spec.ts index f89e09ba..e9bc2721 100644 --- a/tests/components/ActionButton/ToggleActionButton.spec.ts +++ b/tests/components/ActionButton/ToggleActionButton.spec.ts @@ -3,6 +3,7 @@ import { Mock } from 'coveo-search-ui-tests'; import { IToggleActionButtonOptions, ToggleActionButton } from '../../../src/components/ActionButton/ToggleActionButton'; import * as icons from '../../../src/utils/icons'; import { ActionButton } from '../../../src/components/ActionButton/ActionButton'; +import { IComponentOptions } from 'coveo-search-ui'; describe('ToggleActionButton', () => { let sandbox: SinonSandbox; @@ -27,10 +28,10 @@ describe('ToggleActionButton', () => { beforeEach(() => { options = { - activatedIcon: icons.duplicate, - activatedTooltip: 'activated tooltip', - deactivatedIcon: icons.copy, - deactivatedTooltip: 'tooltip', + activateIcon: icons.copy, + activateTooltip: 'Activate feature', + deactivateIcon: icons.duplicate, + deactivateTooltip: 'Deactivate feature', click: clickSpy, activate: activateSpy, deactivate: deactivateSpy @@ -52,6 +53,11 @@ describe('ToggleActionButton', () => { return componentSetup.cmp; } + function getOption(optionName: string): IComponentOptions { + const dictOptions = ToggleActionButton.options as { [key: string]: any }; + return dictOptions[optionName] as IComponentOptions; + } + describe('clicking the button', () => { beforeEach(() => { Coveo.$$(testSubject.element).trigger('click'); @@ -86,12 +92,12 @@ describe('ToggleActionButton', () => { expect(attributeValue).toEqual('true'); }); - it('should update button with activated icon', () => { - expect(updateIconSpy.calledWith(options.activatedIcon)).toBeTrue(); + it('should update button with deactivate icon', () => { + expect(updateIconSpy.calledWith(options.deactivateIcon)).toBeTrue(); }); - it('should update button with activated tooltip', () => { - expect(updateTooltipSpy.calledWith(options.activatedTooltip)).toBeTrue(); + it('should update button with deactivate tooltip', () => { + expect(updateTooltipSpy.calledWith(options.deactivateTooltip)).toBeTrue(); }); }); @@ -121,12 +127,27 @@ describe('ToggleActionButton', () => { expect(attributeValue).toEqual('false'); }); - it('should update button with deactivated icon', () => { - expect(updateIconSpy.calledWith(options.deactivatedIcon)).toBeTrue(); + it('should update button with activate icon', () => { + expect(updateIconSpy.calledWith(options.activateIcon)).toBeTrue(); }); - it('should update button with deactivated tooltip', () => { - expect(updateTooltipSpy.calledWith(options.deactivatedTooltip)).toBeTrue(); + it('should update button with activate tooltip', () => { + expect(updateTooltipSpy.calledWith(options.activateTooltip)).toBeTrue(); + }); + }); + + describe('legacy options compatibility', () => { + [ + { legacy: 'activatedIcon', current: 'deactivateIcon' }, + { legacy: 'activatedTooltip', current: 'deactivateTooltip' }, + { legacy: 'deactivatedIcon', current: 'activateIcon' }, + { legacy: 'deactivatedTooltip', current: 'activateTooltip' } + ].forEach(({ legacy, current }) => { + it(`should support legacy '${legacy}' option through '${current}'`, () => { + const option = getOption(current); + + expect(option.alias).toContain(legacy); + }); }); }); });