feat(ui-kit/icon-box): new component

ui/demo-pwa/esbuild.mjs

@@ -128,7 +128,8 @@ if (debugMode) {
 
 /*
   TODO:
-  - Assets hash
+  - Workbox and sw
+  - Res (all assets) hash
   - PostCSS css file
   - lit css loader
   - PostCSS lit internal styles

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

@@ -1,13 +1,16 @@
 import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element';
 
 import '@alwatr/ui-kit/card/card.js';
+import '@alwatr/ui-kit/card/icon-box.js';
 
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-page-card': AlwatrPageCard;
   }
 }
 
+const loremText = `مداد رنگی ها مشغول بودند به جز مداد سفید، هیهم باشیم شاید فردا ما هم در کنار هم نباشیم…`;
+
 /**
  * Alwatr Demo Home Page
  */
@@ -21,14 +24,20 @@ export class AlwatrPageCard extends AlwatrSmartElement {
       box-sizing: border-box;
       height: 100%;
       gap: var(--sys-spacing-track);
+      overflow-y: scroll;
     }
 
-    alwatr-card {
+    alwatr-card,
+    alwatr-icon-box {
       flex-grow: 1;
-      display: flex;
-      align-items: flex-end;
       width: 25%;
       user-select: none;
+      min-height: 15rem;
+    }
+
+    alwatr-card {
+      display: flex;
+      align-items: flex-end;
     }
 
     input {
@@ -48,15 +57,28 @@ export class AlwatrPageCard extends AlwatrSmartElement {
   override render(): unknown {
     super.render();
     return html`
+      <alwatr-icon-box
+        .content=${{icon: 'gift-outline', headline: 'قرعه کشی', description: loremText}}
+      ></alwatr-icon-box>
+      <alwatr-icon-box
+        .content=${{icon: 'download-outline', headline: 'کاتالوگ', description: loremText}}
+      ></alwatr-icon-box>
+      <alwatr-icon-box
+        .content=${{icon: 'earth-outline', headline: 'وب‌سایت', description: loremText, href: '/'}}
+      ></alwatr-icon-box>
+
       <alwatr-card stated elevated><input type="text" value="elevated" /></alwatr-card>
       <alwatr-card stated elevated><input type="text" value="elevated" /></alwatr-card>
       <alwatr-card stated elevated disabled><input type="text" value="elevated" disabled /></alwatr-card>
+
       <alwatr-card stated elevated="2"><input type="text" value="elevated 2" /></alwatr-card>
       <alwatr-card stated elevated="3"><input type="text" value="elevated 3" /></alwatr-card>
       <alwatr-card stated elevated="4"><input type="text" value="elevated 4" /></alwatr-card>
+
       <alwatr-card stated filled><input type="text" value="filled" /></alwatr-card>
       <alwatr-card stated elevated filled><input type="text" value="filled" /></alwatr-card>
       <alwatr-card stated filled disabled><input type="text" value="filled" disabled /></alwatr-card>
+
       <alwatr-card stated outlined><input type="text" value="outlined" /></alwatr-card>
       <alwatr-card stated outlined><input type="text" value="outlined" /></alwatr-card>
       <alwatr-card stated outlined disabled><input type="text" value="outlined" disabled /></alwatr-card>

ui/element/src/surface-element.ts

@@ -46,7 +46,7 @@ export class AlwatrSurfaceElement extends AlwatrDummyElement {
         );
       background-repeat: no-repeat;
       outline: 0;
-      border-radius: var(--sys-radius-small);
+      border-radius: var(--sys-radius-medium);
       overflow: hidden;
       overflow: clip;
     }

ui/ui-kit/src/card/card.ts

@@ -23,7 +23,7 @@ export class AlwatrCard extends AlwatrSurfaceElement {
   ];
 
   override render(): unknown {
-    super.render();
+    this._logger.logMethod('render');
     return html`<slot></slot>`;
   }
 }

ui/ui-kit/src/card/icon-box.ts

@@ -0,0 +1,105 @@
+import {css, customElement, html, property, nothing, ifDefined} from '@alwatr/element';
+
+import '@alwatr/icon';
+
+import {AlwatrCard} from './card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-icon-box': AlwatrIconBox;
+  }
+}
+
+export type IconBoxContent = {
+  icon: string;
+  headline: string;
+  description: string;
+  href?: string;
+  flipRtl?: boolean;
+}
+
+/**
+ * Alwatr standard icon button element.
+ */
+@customElement('alwatr-icon-box')
+export class AlwatrIconBox extends AlwatrCard {
+  static override styles = [
+    AlwatrCard.styles,
+    css`
+      :host {
+        display: block;
+        padding: 0;
+        transition-property: color, background-color;
+        transition-duration: var(--sys-motion-duration-small);
+        transition-timing-function: var(--sys-motion-easing-linear);
+      }
+      :host(:hover) {
+        --_surface-color-on: var(--sys-color-on-primary-hsl);
+        --_surface-color-bg: var(--sys-color-primary-hsl);
+      }
+
+      a {
+        display: block;
+        padding: calc(2 * var(--sys-spacing-track));
+        border-radius: inherit;
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .headline {
+        font-family: var(--sys-typescale-display-small-font-family-name);
+        font-weight: var(--sys-typescale-display-small-font-weight);
+        font-size: var(--sys-typescale-display-small-font-size);
+        letter-spacing: var(--sys-typescale-display-small-letter-spacing);
+        line-height: var(--sys-typescale-display-small-line-height);
+      }
+
+      .headline alwatr-icon {
+        display: block;
+        margin-bottom: var(--sys-spacing-track);
+        font-size: 2em;
+        color: var(--sys-color-primary);
+        transition: color var(--sys-motion-duration-small) var(--sys-motion-easing-linear);
+      }
+      :host(:hover) .headline alwatr-icon {
+        color: var(--sys-color-on-primary);
+      }
+
+      .description {
+        font-family: var(--sys-typescale-body-medium-font-family-name);
+        font-weight: var(--sys-typescale-body-medium-font-weight);
+        font-size: var(--sys-typescale-body-medium-font-size);
+        letter-spacing: var(--sys-typescale-body-medium-letter-spacing);
+        line-height: var(--sys-typescale-body-medium-line-height);
+        margin-top: calc(2 * var(--sys-spacing-track));
+      }
+
+      .description:empty {
+        display: none;
+      }
+    `,
+  ];
+
+  @property({type: Object})
+    content?: IconBoxContent;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute('stated', '');
+    this.setAttribute('elevated', '3');
+  }
+
+  override render(): unknown {
+    this._logger.logMethod('render');
+    if (this.content == null) return nothing;
+    return html`
+      <a href=${ifDefined(this.content?.href)}>
+        <div class="headline">
+          <alwatr-icon .name=${this.content.icon} ?flip-rtl=${this.content.flipRtl}></alwatr-icon>
+          ${this.content.headline}
+        </div>
+        <div class="description">${this.content.description}</div>
+      </a>
+    `;
+  }
+}

ui/ui-kit/style/token/motion.css

@@ -2,12 +2,12 @@
   --ref-motion-duration-frame: 16.66666666666666667ms;
 
   --sys-motion-duration-none: calc(2 * var(--ref-motion-duration-frame));
-  --sys-motion-duration-small-in: calc(8 * var(--ref-motion-duration-frame));
+  --sys-motion-duration-small: calc(8 * var(--ref-motion-duration-frame));
   --sys-motion-duration-small-out: calc(6 * var(--ref-motion-duration-frame));
-  --sys-motion-duration-medium-in: calc(16 * var(--ref-motion-duration-frame));
+  --sys-motion-duration-medium: calc(16 * var(--ref-motion-duration-frame));
   --sys-motion-duration-medium-out: calc(12 * var(--ref-motion-duration-frame));
-  --sys-motion-duration-large-in: calc(18 * var(--ref-motion-duration-frame));
-  --sys-motion-duration-large-out: calc(16 * var(--ref-motion-duration-frame));
+  --sys-motion-duration-large: calc(18 * var(--ref-motion-duration-frame));
+  --sys-motion-duration-large-out: var(--sys-motion-duration-medium);
 
   --sys-motion-easing-linear: cubic-bezier(0.4, 0, 0.6, 1);
   --sys-motion-easing-incoming: cubic-bezier(0, 0, 0.2, 1);