Skip to content

Commit

Permalink
feat(SFINT-3300): Improve option names
Browse files Browse the repository at this point in the history
  • Loading branch information
@lbergeron
lbergeron committed Jul 3, 2020
1 parent 09fce17 commit 9f533f2
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 39 deletions.
8 changes: 4 additions & 4 deletions pages/toggle_action_button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ <h2>Toggle Button</h2>
<br />
<button
class="CoveoToggleActionButton"
data-deactivated-icon='&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.997 78.997" height="298.571" width="298.571"&gt;&lt;circle r="39.499" cy="120.385" cx="84.1" transform="translate(-44.601 -80.887)"/&gt;&lt;/svg&gt;'
data-deactivated-tooltip="Normal tooltip"
data-activated-tooltip="Activated tooltip"
data-activated-icon='&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.997 78.997" height="298.571" width="298.571"&gt;&lt;path d="M39.434 0A39.499 39.499 0 000 39.498a39.499 39.499 0 0039.498 39.5 39.499 39.499 0 0039.5-39.5A39.499 39.499 0 0039.497 0a39.499 39.499 0 00-.064 0zm.59 7.273a31.948 31.948 0 0131.948 31.949A31.948 31.948 0 0140.023 71.17 31.948 31.948 0 018.075 39.222 31.948 31.948 0 0140.023 7.273z"/&gt;&lt;/svg&gt;'
data-activate-icon='&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.997 78.997" height="298.571" width="298.571"&gt;&lt;circle r="39.499" cy="120.385" cx="84.1" transform="translate(-44.601 -80.887)"/&gt;&lt;/svg&gt;'
data-activate-tooltip="Activate feature"
data-deactivate-tooltip="Deactivate feature"
data-deactivate-icon='&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.997 78.997" height="298.571" width="298.571"&gt;&lt;path d="M39.434 0A39.499 39.499 0 000 39.498a39.499 39.499 0 0039.498 39.5 39.499 39.499 0 0039.5-39.5A39.499 39.499 0 0039.497 0a39.499 39.499 0 00-.064 0zm.59 7.273a31.948 31.948 0 0131.948 31.949A31.948 31.948 0 0140.023 71.17 31.948 31.948 0 018.075 39.222 31.948 31.948 0 0140.023 7.273z"/&gt;&lt;/svg&gt;'
></button>
</div>
</body>
Expand Down
46 changes: 23 additions & 23 deletions src/components/ActionButton/ToggleActionButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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.
*
Expand All @@ -30,25 +31,24 @@ export class ToggleActionButton extends Component {
* The attribute would be set like this:
*
* ```html
* <button class='CoveoToggleActionButton' data-activated-icon='&lt;svg width=&quot;1em&quot; height=&quot;1em&quot;&gt;...&lt;/svg&gt;'></button>
* <button class='CoveoToggleActionButton' data-activate-icon='&lt;svg width=&quot;1em&quot; height=&quot;1em&quot;&gt;...&lt;/svg&gt;'></button>
* ```
*/
activatedIcon: ComponentOptions.buildStringOption(),
activateIcon: ComponentOptions.buildStringOption(),

/**
* 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
* <button class='CoveoToggleActionButton' data-activated-tooltip='My activated button tooltip'></button>
* <button class='CoveoToggleActionButton' data-activate-tooltip='Activate the feature'></button>
* ```
*/
activatedTooltip: ComponentOptions.buildStringOption(),
activateTooltip: ComponentOptions.buildStringOption(),

/**
* 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.
*
Expand All @@ -61,21 +61,21 @@ export class ToggleActionButton extends Component {
* The attribute would be set like this:
*
* ```html
* <button class='CoveoToggleActionButton' data-deactivated-icon='&lt;svg width=&quot;1em&quot; height=&quot;1em&quot;&gt;...&lt;/svg&gt;'></button>
* <button class='CoveoToggleActionButton' data-deactivate-icon='&lt;svg width=&quot;1em&quot; height=&quot;1em&quot;&gt;...&lt;/svg&gt;'></button>
* ```
*/
deactivatedIcon: ComponentOptions.buildStringOption(),
deactivateIcon: ComponentOptions.buildStringOption(),

/**
* 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
* <button class='CoveoToggleActionButton' data-deactivated-tooltip='My button tooltip'></button>
* <button class='CoveoToggleActionButton' data-deactivate-tooltip='Deactivate the feature'></button>
* ```
*/
deactivatedTooltip: ComponentOptions.buildStringOption(),
deactivateTooltip: ComponentOptions.buildStringOption(),

/**
* Specifies the handler called when the button is clicked.
Expand Down Expand Up @@ -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
Expand All @@ -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);
}
}
}
Expand Down
24 changes: 12 additions & 12 deletions tests/components/ActionButton/ToggleActionButton.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,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
Expand Down Expand Up @@ -86,12 +86,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();
});
});

Expand Down Expand Up @@ -121,12 +121,12 @@ 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();
});
});
});

0 comments on commit 9f533f2

Please sign in to comment.