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

components/icon-button-toggle/package.json

@@ -0,0 +1,34 @@
+{
+ "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": {
+ "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",
+ "@material/mwc-icon-button": "^0.19.1",
+ "@vonage/vwc-icon-button": "^0.16.2",
+ "@vonage/vvd-core": "^0.16.2",
+ "@vonage/vvd-style-coupling": "^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,77 @@
+import '@vonage/vvd-core';
+import { customElement, html, property, TemplateResult } from 'lit-element';
+import { IconButtonToggle as MWCIconButtonToggle } from '@material/mwc-icon-button-toggle';
+import { style as styleCoupling } from '@vonage/vvd-style-coupling/vvd-style-coupling.css.js';
+import { style as vwcButtonStyle } from '@vonage/vwc-icon-button/vwc-icon-button.css';
+import { style as mwcIconButtonStyle } from '@material/mwc-icon-button/mwc-icon-button-css.js';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'vwc-icon-button-toggle': VWCIconButtonToggle;
+ }
+}
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-ignore
+MWCIconButtonToggle.styles = [
+ styleCoupling,
+ mwcIconButtonStyle,
+ vwcButtonStyle,
+];
+
+/**
+ * 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>`;
+ }
+
+ // ! copy & paste code from original mwc icon button toggle
+ // ! to replace icon handling
+ protected render(): TemplateResult {
+ return html` <button
+ class="mdc-icon-button"
+ @click="${this.handleClick}"
+ aria-label="${this.label}"
+ ?disabled="${this.disabled}"
+ @focus="${this.handleRippleFocus}"
+ @blur="${this.handleRippleBlur}"
+ @mousedown="${this.handleRippleMouseDown}"
+ @mouseenter="${this.handleRippleMouseEnter}"
+ @mouseleave="${this.handleRippleMouseLeave}"
+ @touchstart="${this.handleRippleTouchStart}"
+ @touchend="${this.handleRippleDeactivate}"
+ @touchcancel="${this.handleRippleDeactivate}"
+ >
+ ${this.renderRipple()}
+ <span class="mdc-icon-button__icon">
+ <slot name="offIcon"> ${this.renderIcon(this.offIcon)} </slot>
+ </span>
+ <span class="mdc-icon-button__icon mdc-icon-button__icon--on">
+ <slot name="onIcon"> ${this.renderIcon(this.onIcon)} </slot>
+ </span>
+ </button>`;
+ }
+}

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,22 @@
+{
+ "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"
+ },
+ {
+ "path": "../../common/style-coupling"
+ }
+ ]
+}

package.json

@@ -87,8 +87,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",

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" },

yarn.lock

@@ -2226,6 +2226,19 @@
  "@material/typography" "8.0.0-canary.774dcfc8e.0"
  tslib "^1.9.3"
 
+"@material/icon-button@=8.0.0-canary.774dcfc8e.0":
+ version "8.0.0-canary.774dcfc8e.0"
+ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/@material/icon-button/-/icon-button-8.0.0-canary.774dcfc8e.0.tgz#b4b421629ca0503bb66b0cfe6c8a909d86d6444f"
+ integrity sha1-tLQhYpygUDu2awz+bIqQnYbWRE8=
+ dependencies:
+ "@material/base" "8.0.0-canary.774dcfc8e.0"
+ "@material/density" "8.0.0-canary.774dcfc8e.0"
+ "@material/feature-targeting" "8.0.0-canary.774dcfc8e.0"
+ "@material/ripple" "8.0.0-canary.774dcfc8e.0"
+ "@material/rtl" "8.0.0-canary.774dcfc8e.0"
+ "@material/theme" "8.0.0-canary.774dcfc8e.0"
+ tslib "^1.9.3"
+
 "@material/line-ripple@8.0.0-canary.774dcfc8e.0", "@material/line-ripple@=8.0.0-canary.774dcfc8e.0":
  version "8.0.0-canary.774dcfc8e.0"
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/@material/line-ripple/-/line-ripple-8.0.0-canary.774dcfc8e.0.tgz#4050dfeaad894e6ca4cf7325ff7be4d6d9162058"
@@ -2382,6 +2395,18 @@
  lit-html "^1.1.2"
  tslib "^1.10.0"
 
+"@material/mwc-icon-button-toggle@^0.19.1":
+ version "0.19.1"
+ resolved "https://registry.yarnpkg.com/@material/mwc-icon-button-toggle/-/mwc-icon-button-toggle-0.19.1.tgz#89e2132fc7513ab05e915f9847956c62fba1a9cd"
+ integrity sha512-E8lHGDtaPSVhuc4+SX3B/k61G9mUoX8f2cp9SCcYmoclkZS0jZpeCoTdpq2lfbh+oqQwxyhS8cB4y6UpSz9ing==
+ dependencies:
+ "@material/icon-button" "=8.0.0-canary.774dcfc8e.0"
+ "@material/mwc-base" "^0.19.1"
+ "@material/mwc-icon-button" "^0.19.1"
+ "@material/mwc-ripple" "^0.19.1"
+ lit-element "^2.3.0"
+ tslib "^1.10.0"
+
 "@material/mwc-icon-button@^0.19.1":
  version "0.19.1"
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/@material/mwc-icon-button/-/mwc-icon-button-0.19.1.tgz#8bf761a22e89fd7224917368e8f0c7db772e4641"
@@ -7498,10 +7523,12 @@ depcheck@YonatanKra/depcheck#vivid-version:
  minimatch "^3.0.4"
  multimatch "^4.0.0"
  please-upgrade-node "^3.2.0"
+ query-ast "^1.0.3"
  readdirp "^3.4.0"
  require-package-name "^2.0.1"
  resolve "^1.17.0"
  sass "^1.26.10"
+ scss-parser "^1.0.4"
  vue-template-compiler "^2.6.11"
  yargs "^15.4.0"
 
@@ -10245,7 +10272,14 @@ intersection-observer@^0.7.0:
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/intersection-observer/-/intersection-observer-0.7.0.tgz#ee16bee978db53516ead2f0a8154b09b400bbdc9"
  integrity sha1-7ha+6XjbU1FurS8KgVSwm0ALvck=
 
-invariant@^2.2.3, invariant@^2.2.4:
+invariant@2.2.2:
+ version "2.2.2"
+ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+ integrity sha1-nh9WrArNtr8wMwbzOL47IErmA2A=
+ dependencies:
+ loose-envify "^1.0.0"
+
+invariant@2.2.4, invariant@^2.2.3, invariant@^2.2.4:
  version "2.2.4"
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
  integrity sha1-YQ88ksk1nOHbYW5TgAjSP/NRWOY=
@@ -11555,7 +11589,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.2.1, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.2.1, lodash@~4.17.10:
  version "4.17.20"
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
  integrity sha1-tEqbYpe8tpjxxRo1RaKzs2jVnFI=
@@ -13757,6 +13791,14 @@ qs@~6.5.2:
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
  integrity sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=
 
+query-ast@^1.0.3:
+ version "1.0.3"
+ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/query-ast/-/query-ast-1.0.3.tgz#4a18374950fa80cbf9b03d7b945bbac8bb4250bf"
+ integrity sha1-Shg3SVD6gMv5sD17lFu6yLtCUL8=
+ dependencies:
+ invariant "2.2.2"
+ lodash "^4.17.15"
+
 querystring-es3@^0.2.0:
  version "0.2.1"
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -14795,6 +14837,14 @@ schema-utils@^3.0.0:
  ajv "^6.12.5"
  ajv-keywords "^3.5.2"
 
+scss-parser@^1.0.4:
+ version "1.0.4"
+ resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/scss-parser/-/scss-parser-1.0.4.tgz#61cdeb28701ffcb497954b9b05729c6d38eb8b9f"
+ integrity sha1-Yc3rKHAf/LSXlUubBXKcbTjri58=
+ dependencies:
+ invariant "2.2.4"
+ lodash "^4.17.4"
+
 scss-tokenizer@^0.2.3:
  version "0.2.3"
  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"