fix(components): fixes for button, icon toggle, card

libs/components/src/button/_button.theme.scss

@@ -12,20 +12,13 @@
   }
 
   // --- apply accent color --- //
-  td-button[outlined].accent.primary,
-  td-button[raised].accent.primary,
-  td-button[text].accent.primary {
+  td-button.accent.primary {
     --mdc-theme-primary: #{map-get($theme, primary)};
     --mdc-button-outline-color: var(--mdc-theme-primary);
   }
 
   // --- apply error color --- //
-  td-button[outlined].destructive.primary,
-  td-button[raised].destructive.primary,
-  td-button[text].destructive.primary,
-  td-button[outlined].negative.primary, // Same thing, just using "negative" alias
-  td-button[raised].negative.primary,
-  td-button[text].negative.primary {
+  td-button.destructive.primary {
     --mdc-theme-primary: var(--mdc-theme-error);
     --mdc-button-outline-color: var(--mdc-theme-error);
   }

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

@@ -0,0 +1,33 @@
+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),
+      defaultValue: 'alarm_on',
+    },
+    offIcon: {
+      control: 'select',
+      options: Object.keys(iconList),
+      defaultValue: 'alarm_off',
+    },
+    disabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    onClick: { action: 'onClick' },
+  },
+};
+
+const Template = ({ onIcon, offIcon, onClick }) => {
+  return `
+    <td-icon-button-toggle 
+      onIcon="${onIcon}" 
+      offIcon="${offIcon}">
+    </td-icon-button-toggle>`;
+};
+
+export const Basic = Template.bind({});

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

@@ -0,0 +1,14 @@
+import { IconButtonToggleBase } from '@material/mwc-icon-button-toggle/mwc-icon-button-toggle-base';
+import { styles } from '@material/mwc-icon-button/mwc-icon-button.css';
+import { customElement } from 'lit/decorators.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'td-icon-button-toggle': CovalentIconButtonToggleBase;
+  }
+}
+
+@customElement('td-icon-button-toggle')
+export class CovalentIconButtonToggleBase extends IconButtonToggleBase {
+  static override styles = [styles];
+}

libs/components/src/index.ts

@@ -3,12 +3,14 @@ export * from './alert/alert';
 export * from './app-shell/app-shell';
 export * from './button/button';
 export * from './checkbox/checkbox';
+export * from './card/card';
 export * from './circular-progress/circular-progress';
 export * from './dialog/dialog';
 export * from './drawer/drawer';
 export * from './empty-state/empty-state';
 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/webpack.config.js

@@ -10,6 +10,7 @@ module.exports = {
     alert: './libs/components/src/alert/alert.ts',
     appShell: './libs/components/src/app-shell/app-shell.ts',
     button: './libs/components/src/button/button.ts',
+    card: './libs/components/src/card/card.ts',
     checkbox: './libs/components/src/checkbox/checkbox.ts',
     circularProgress:
       './libs/components/src/circular-progress/circular-progress.ts',
@@ -19,6 +20,8 @@ module.exports = {
     formField: './libs/components/src/formfield/formfield.ts',
     icon: './libs/components/src/icon/icon.ts',
     iconButton: './libs/components/src/icon-button/icon-button.ts',
+    iconButtonToggle:
+      './libs/components/src/icon-button-toggle/icon-button-toggle.ts',
     iconCheckbox: './libs/components/src/icon-checkbox/icon-check-toggle.ts',
     iconRadio: './libs/components/src/icon-radio/icon-radio-toggle.ts',
     linearProgress: './libs/components/src/linear-progress/linear-progress.ts',