feat(ui-kit/icon-button): new component (#588)

ui/demo-pwa/src/page-chat.ts

@@ -5,6 +5,7 @@ import '@alwatr/ui-kit/chat/chat-avatar.js';
 import '@alwatr/ui-kit/chat/chat-bubble.js';
 import '@alwatr/ui-kit/chat/chat-message.js';
 import '@alwatr/ui-kit/chat/chat-list.js';
+import '@alwatr/ui-kit/icon-button/standard-icon-button.js';
 
 import type {ChatStorage} from '@alwatr/ui-kit/chat/chat-list.js';
 
@@ -35,7 +36,8 @@ const chatStorage: ChatStorage = {
       id: '2',
       from: 'user-2',
       type: 'text',
-      text: 'با تمام جهل و مستی تصمیم گرفته‌ام دفترچه رزوگار را با پاک کنِ مهر و عطوفت پاک کنم\n' +
+      text:
+        'با تمام جهل و مستی تصمیم گرفته‌ام دفترچه رزوگار را با پاک کنِ مهر و عطوفت پاک کنم\n' +
         'و از اول با نام تو روزگار را آغاز کنم.',
     },
     '3': {
@@ -78,7 +80,8 @@ const chatStorage: ChatStorage = {
       id: '9',
       from: 'user-4',
       type: 'text',
-      text: 'سالهاست می اندیشم که هنگام بهار مگر چه می شود که اینگونه به هم می ریزیم' +
+      text:
+        'سالهاست می اندیشم که هنگام بهار مگر چه می شود که اینگونه به هم می ریزیم' +
         '،مهربان می شویم، به سراغ هم می رویم و از همه مهمتر منتظر می شویم…',
     },
     '10': {
@@ -131,23 +134,37 @@ export class AlwatrPageHome extends AlwatrSmartElement {
         text on surface-variant
       </p>
 
+      <p>
+        <span class="section-name">icon buttons</span>
+        <alwatr-standard-icon-button .icon=${'menu-outline'}></alwatr-standard-icon-button>
+        <alwatr-standard-icon-button .icon=${'mic-outline'}></alwatr-standard-icon-button>
+        <alwatr-standard-icon-button .icon=${'happy-outline'}></alwatr-standard-icon-button>
+        <alwatr-standard-icon-button .icon=${'send'}></alwatr-standard-icon-button>
+      </p>
+
       <p>
         <span class="section-name">alwatr-chat-avatar</span>
         ${map(messageListShort, (message) => html`<alwatr-chat-avatar .user=${message.from}></alwatr-chat-avatar>`)}
       </p>
 
       <p>
         <span class="section-name">alwatr-chat-bubble</span>
-        ${map(messageListShort, (message) => html`
-          <alwatr-chat-bubble .text=${message.text} ?end-side=${message.from !== currentUser}></alwatr-chat-bubble>
-        `)}
+        ${map(
+      messageListShort,
+      (message) => html`
+            <alwatr-chat-bubble .text=${message.text} ?end-side=${message.from !== currentUser}></alwatr-chat-bubble>
+          `,
+  )}
       </p>
 
       <p>
         <span class="section-name">alwatr-chat-message</span>
-        ${map(messageListShort, (message) => html`
-          <alwatr-chat-message .message=${message} ?end-side=${message.from !== currentUser}></alwatr-chat-message>
-        `)}
+        ${map(
+      messageListShort,
+      (message) => html`
+            <alwatr-chat-message .message=${message} ?end-side=${message.from !== currentUser}></alwatr-chat-message>
+          `,
+  )}
       </p>
 
       <alwatr-chat-list .storage=${chatStorage} .currentUser=${currentUser}></alwatr-chat-list>

ui/demo-pwa/style/tokens/state.css

@@ -1,10 +1,10 @@
 :root {
   /* Dragged state layer opacity */
-  --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
+  --md-sys-state-dragged-state-layer-opacity: 0.2;
   /* Pressed state layer opacity */
-  --md-sys-state-pressed-state-layer-opacity: 0.11999999731779099;
+  --md-sys-state-pressed-state-layer-opacity: 0.15;
   /* Focus state layer opacity */
-  --md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
+  --md-sys-state-focus-state-layer-opacity: 0.15;
   /* Hover state layer opacity */
-  --md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
+  --md-sys-state-hover-state-layer-opacity: 0.09;
 }

ui/ui-kit/src/icon-button/standard-icon-button.ts

@@ -0,0 +1,81 @@
+import {AlwatrDummyElement, css, customElement, html, property} from '@alwatr/element';
+
+import '@alwatr/icon';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-standard-icon-button': AlwatrStandardIconButton;
+  }
+}
+
+/**
+ * Alwatr standard icon button element.
+ */
+@customElement('alwatr-standard-icon-button')
+export class AlwatrStandardIconButton extends AlwatrDummyElement {
+  static override styles = css`
+    :host {
+      position: relative;
+      display: inline-flex;
+      user-select: none;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: auto;
+
+      cursor: pointer;
+      color: var(--md-sys-color-on-surface-variant);
+      background-color: transparent;
+      width: var(--md-sys-spacing-track-5);
+      height: var(--md-sys-spacing-track-5);
+      border-radius: 50%;
+      outline: 0;
+      overflow: hidden;
+      overflow: clip;
+      z-index: var(--md-sys-zindex-default);
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    :host::before {
+      content: '';
+      position: absolute;
+      z-index: var(--md-sys-zindex-below);
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      inset: 0;
+      opacity: 0;
+      transition: opacity var(--md-sys-motion-duration-small-out) var(--md-sys-motion-easing-linear);
+      background-color: var(--md-sys-color-on-surface-variant);
+    }
+
+    :host(:hover)::before {
+      opacity: var(--md-sys-state-hover-state-layer-opacity);
+      transition-duration: var(--md-sys-motion-duration-small-in);
+    }
+
+    :host(:active)::before {
+      opacity: var(--md-sys-state-pressed-state-layer-opacity);
+      transition-duration: 0ms;
+    }
+
+    :host(:focus)::before {
+      opacity: var(--md-sys-state-focus-state-layer-opacity);
+      transition-duration: var(--md-sys-motion-duration-small-in);
+    }
+
+    alwatr-icon {
+      width: var(--md-sys-spacing-track-3);
+      height: var(--md-sys-spacing-track-3);
+    }
+  `;
+
+  @property() icon?: string;
+
+  override render(): unknown {
+    return html`<alwatr-icon .name=${this.icon}></alwatr-icon>`;
+  }
+}