feat(vwc-icon-button-toggle): extending mwc icon-button-toggle

components/icon-button-toggle/package.json

@@ -0,0 +1,33 @@
+{
+ "name": "@vonage/vwc-icon-button-toggle",
+ "version": "0.16.2",
+ "description": "icon button component",
+ "homepage": "https://github.com/Vonage/vivid/tree/master/components/icon-button-toggle#readme",
+ "license": "ISC",
+ "main": "vwc-icon-button-toggle.js",
+ "module": "vwc-icon-button-toggle.js",
+ "files": [
+ "*.js",
+ "*.ts",
+ "*.map"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/vonage/vivid.git",
+ "directory": "components/icon-button-toggle"
+ },
+ "scripts": {
+ "prepare": "cd .. && yarn patch-package",
+ "test": "echo \"Error: run tests from root\" && exit 1"
+ },
+ "bugs": {
+ "url": "https://github.com/Vonage/vivid/issues"
+ },
+ "dependencies": {
+ "@material/mwc-icon-button-toggle": "^0.19.1",
+ "@vonage/vwc-icon-button": "^0.19.1",
+ "@vonage/vvd-core": "^0.16.2",
+ "lit-element": "^2.4.0",
+ "tslib": "^2.0.3"
+ }
+}

components/icon-button-toggle/src/vwc-icon-button-toggle.ts

@@ -0,0 +1,42 @@
+import '@vonage/vvd-core';
+import { VWCIconButton } from '@vonage/vwc-icon-button';
+import { customElement, html, property, TemplateResult } from 'lit-element';
+import { IconButtonToggle as MWCIconButtonToggle } from '@material/mwc-icon-button-toggle';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'vwc-icon-button-toggle': VWCIconButtonToggle;
+ }
+}
+
+MWCIconButtonToggle.styles = VWCIconButton.styles;
+
+/**
+ * This component is an extension of [<mwc-icon-button-toggle>](https://github.com/material-components/material-components-web-components/tree/master/packages/icon-button-toggle)
+ */
+@customElement('vwc-icon-button-toggle')
+export class VWCIconButtonToggle extends MWCIconButtonToggle {
+ @property({ type: Boolean, reflect: true })
+ dense? = false;
+
+ @property({ type: Boolean, reflect: true })
+ enlarged? = false;
+
+ protected updated(changes: Map<string, boolean>): void {
+ if (changes.has('dense')) {
+ if (this.dense && this.enlarged) {
+ this.enlarged = undefined;
+ }
+ }
+
+ if (changes.has('enlarged')) {
+ if (this.enlarged && this.dense) {
+ this.dense = undefined;
+ }
+ }
+ }
+
+ protected renderIcon(type: string): TemplateResult {
+ return html`<vwc-icon class="icon" size="small" type="${type}"></vwc-icon>`;
+ }
+}

components/icon-button-toggle/stories/arg-types.js

@@ -0,0 +1,29 @@
+export const argTypes = {
+ dense: {
+ control: {
+ type: 'inline-radio',
+ options: { 'true': '', 'false': undefined }
+ }
+ },
+ enlarged: {
+ control: {
+ type: 'inline-radio',
+ options: { 'true': '', 'false': undefined }
+ }
+ },
+ disabled: {
+ control: {
+ type: 'inline-radio',
+ options: { 'true': '', 'false': undefined }
+ }
+ },
+ on: {
+ control: {
+ type: 'inline-radio',
+ options: { 'true': '', 'false': undefined }
+ }
+ },
+ styles: { table: { disable: true } },
+ buttonElement: { table: { disable: true } },
+ ripple: { table: { disable: true } }
+}

components/icon-button-toggle/stories/icon-button-toggle.stories.js

@@ -0,0 +1,30 @@
+import '@vonage/vwc-icon-button-toggle/vwc-icon-button-toggle.js';
+import { html } from 'lit-element';
+import { spread } from '@open-wc/lit-helpers';
+import { argTypes } from './arg-types.js';
+
+export default {
+ title: 'Atoms/IconButtonToggle',
+ component: 'vwc-icon-button-toggle',
+ argTypes
+};
+
+const Template = args => html`<vwc-icon-button-toggle ...=${spread(args)}></vwc-icon-button-toggle>`;
+
+export const Basic = Template.bind({});
+Basic.args = { onIcon: 'bookmark-full', offIcon: 'bookmark' };
+
+export const Dense = Template.bind({});
+Dense.args = { onIcon: 'tag-detach-full', offIcon: 'tag-detach', dense: true };
+
+export const Enlarged = Template.bind({});
+Enlarged.args = { onIcon: 'separator-full', offIcon: 'separator', enlarged: true };
+
+export const Disabled = Template.bind({});
+Disabled.args = { onIcon: 'preferences-full', offIcon: 'preferences', disabled: true };
+
+// on boolean false Whether the toggle is activated.
+// onIcon string '' Icon to display when on is true.
+// offIcon string '' Icon to display when on is false.
+// label string '' Accessible label for the button, sets aria-label.
+// disabled

components/icon-button-toggle/test/icon-button-toggle.test.js

@@ -0,0 +1,29 @@
+import '../vwc-icon-button-toggle.js';
+import { waitNextTask, textToDomToParent } from '../../../test/test-helpers.js';
+import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
+import { isolatedElementsCreation } from '../../../test/test-helpers';
+
+chai.use(chaiDomDiff);
+
+const COMPONENT_NAME = 'vwc-icon-button-toggle';
+
+describe('icon button toggle', () => {
+ let addElement = isolatedElementsCreation();
+
+ it(`${COMPONENT_NAME} is defined as a custom element`, async () => {
+ assert.exists(
+ customElements.get(
+ COMPONENT_NAME,
+ `${COMPONENT_NAME} element is not defined`
+ )
+ );
+ });
+
+ it('should internal contents', async () => {
+ const [e] = addElement(
+ textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
+ );
+ await waitNextTask();
+ expect(e.shadowRoot.innerHTML).to.equalSnapshot();
+ });
+});

components/icon-button-toggle/tsconfig.json

@@ -0,0 +1,19 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "composite": true,
+ "rootDir": "src",
+ "outDir": ".",
+ "tsBuildInfoFile": ".tsbuildinfo"
+ },
+ "include": ["src/*.ts"],
+ "exclude": ["src/test/*.ts"],
+ "references": [
+ {
+ "path": "../../common/core"
+ },
+ {
+ "path": "../../components/icon-button"
+ }
+ ]
+}

package.json

@@ -27,6 +27,7 @@
  "test:prune-snapshots": "karma start --prune-snapshots",
  "test:bs": "karma start karma.bs.config.js --coverage",
  "git:sync": "git submodule sync && git submodule update --init --recursive --remote",
+ "prepare": "patch-package",
  "postinstall": "yarn bootstrap",
  "bootstrap": "lerna bootstrap",
  "packages:build": "lerna run build",
@@ -87,8 +88,8 @@
  "karma-chai": "^0.1.0",
  "karma-chrome-launcher": "^3.1.0",
  "karma-coverage-istanbul-reporter": "^3.0.3",
- "karma-firefox-launcher": "^2.1.0",
  "karma-file-fixtures-preprocessor": "^3.0.1",
+ "karma-firefox-launcher": "^2.1.0",
  "karma-html": "^1.0.5",
  "karma-mocha": "^2.0.1",
  "karma-mocha-reporter": "^2.2.5",
@@ -101,6 +102,7 @@
  "mocha": "^8.1.3",
  "node-sass": "^4.14.1",
  "node-sass-import": "^2.0.1",
+ "patch-package": "^6.2.2",
  "prettier": "^2.0.5",
  "sass": "^1.26.10",
  "semver-compare": "^1.0.0",

patches/@material+mwc-icon-button-toggle+0.19.1.patch

@@ -0,0 +1,19 @@
+diff --git a/node_modules/@material/mwc-icon-button-toggle/mwc-icon-button-toggle-base.js b/node_modules/@material/mwc-icon-button-toggle/mwc-icon-button-toggle-base.js
+index f8c6cd5..c4b9929 100644
+--- a/node_modules/@material/mwc-icon-button-toggle/mwc-icon-button-toggle-base.js
++++ b/node_modules/@material/mwc-icon-button-toggle/mwc-icon-button-toggle-base.js
+@@ -83,12 +83,12 @@ export class IconButtonToggleBase extends BaseElement {
+ ${this.renderRipple()}
+ <span class="mdc-icon-button__icon">
+ <slot name="offIcon">
+- <i class="material-icons">${this.offIcon}</i>
++ ${this.renderIcon(this.offIcon)}
+ </slot>
+ </span>
+ <span class="mdc-icon-button__icon mdc-icon-button__icon--on">
+ <slot name="onIcon">
+- <i class="material-icons">${this.onIcon}</i>
++ ${this.renderIcon(this.onIcon)}
+ </slot>
+ </span>
+ </button>`;

tsconfig.json

@@ -48,6 +48,7 @@
  { "path": "components/formfield" },
  { "path": "components/icon" },
  { "path": "components/icon-button" },
+ { "path": "components/icon-button-toggle" },
  { "path": "components/keypad" },
  { "path": "components/linear-progress" },
  { "path": "components/list" },