feat(icon-button-toggle): create new web component icon-button-toggle (…

…#2135)

libs/components/package.json

@@ -111,6 +111,11 @@
       "import": "./icon-button.mjs",
       "require": "./icon-button.js"
     },
+    "./icon-button-toggle": {
+      "types": "./icon-button-toggle/icon-button-toggle.d.ts",
+      "import": "./icon-button-toggle.mjs",
+      "require": "./icon-button-toggle.js"
+    },
     "./icon-check-toggle": {
       "types": "./icon-checkbox/icon-checkbox.d.ts",
       "import": "./icon-checkbox.mjs",

libs/components/src/icon-button-toggle/icon-button-toggle.scss

@@ -0,0 +1,17 @@
+:host {
+  border-radius: 50%;
+  color: var(--cv-theme-on-surface-variant);
+}
+
+:host([disabled]) {
+  background-color: transparent;
+}
+
+:host([on]) {
+  --mdc-ripple-press-opacity: 0.16;
+  --mdc-ripple-hover-opacity: 0.12;
+  --mdc-ripple-focus-opacity: 0.16;
+
+  background-color: var(--cv-theme-primary-8);
+  color: var(--cv-theme-primary);
+}

libs/components/src/icon-button-toggle/icon-button-toggle.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentIconButtonToggle } from './icon-button-toggle';
+
+describe('Icon button toggle', () => {
+  it('should work', () => {
+    expect(new CovalentIconButtonToggle()).toBeDefined();
+  });
+});

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

@@ -0,0 +1,32 @@
+import './icon-button-toggle';
+import iconList from '../../../icons/material-codepoints.json';
+
+export default {
+  title: 'Components/Icon Button Toggle',
+  argTypes: {
+    onIcon: {
+      control: 'select',
+      options: Object.keys(iconList),
+    },
+    offIcon: {
+      control: 'select',
+      options: Object.keys(iconList),
+    },
+  },
+  args: {
+    onIcon: 'flashlight_on',
+    offIcon: 'flashlight_off',
+    disabled: false,
+    on: false,
+  },
+};
+
+const Template = ({ disabled, onIcon, offIcon, on }) => {
+  return `
+    <cv-icon-button-toggle onIcon="${onIcon}" offIcon="${offIcon}"${
+    disabled ? ` disabled` : ``
+  }${on ? ' on' : ''}>
+    </cv-icon-button-toggle>`;
+};
+
+export const Basic = Template.bind({});

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

@@ -0,0 +1,22 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { IconButtonToggle } from '@material/mwc-icon-button-toggle/mwc-icon-button-toggle';
+import styles from './icon-button-toggle.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-icon-button-toggle': CovalentIconButtonToggle;
+  }
+}
+
+@customElement('cv-icon-button-toggle')
+export class CovalentIconButtonToggle extends IconButtonToggle {
+  static override styles = [
+    ...IconButtonToggle.styles,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+export default CovalentIconButtonToggle;

libs/components/src/index.ts

@@ -17,6 +17,7 @@ export * from './expansion-panel/expansion-panel-item';
 export * from './formfield/formfield';
 export * from './icon/icon';
 export * from './icon-button/icon-button';
+export * from './icon-button-toggle/icon-button-toggle';
 export * from './icon-checkbox/icon-check-toggle';
 export * from './icon-radio/icon-radio-toggle';
 export * from './linear-progress/linear-progress';

libs/components/vite.config.js

@@ -29,6 +29,7 @@ module.exports = defineConfig(({ mode }) => {
           'libs/components/src/formfield/formfield',
           'libs/components/src/icon/icon',
           'libs/components/src/icon-button/icon-button',
+          'libs/components/src/icon-button-toggle/icon-button-toggle',
           'libs/components/src/icon-checkbox/icon-check-toggle',
           'libs/components/src/icon-radio/icon-radio-toggle',
           'libs/components/src/linear-progress/linear-progress',

package.json

@@ -56,6 +56,7 @@
     "@material/mwc-formfield": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
+    "@material/mwc-icon-button-toggle": "^0.27.0",
     "@material/mwc-linear-progress": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-radio": "^0.27.0",