refactor!: move alwatr-surface to ui-kit and remove old alwatr-card

Alwatr · Jan 22, 2023 · 9eec506 · 9eec506
1 parent 8e78cde
commit 9eec506
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 34 deletions.
diff --git a/ui/element/src/index.ts b/ui/element/src/index.ts
@@ -2,7 +2,6 @@ import {globalAlwatr} from '@alwatr/logger';
 
 export * from './dummy-element.js';
 export * from './smart-element.js';
-export * from './surface-element.js';
 
 export * from './mixins/localize.js';
 export * from './mixins/direction.js';

diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts
diff --git a/ui/element/src/surface-element.ts → ui/ui-kit/src/card/surface-element.ts b/ui/element/src/surface-element.ts → ui/ui-kit/src/card/surface-element.ts
@@ -1,9 +1,13 @@
-import {css, type CSSResultGroup} from 'lit';
+import {AlwatrDummyElement, customElement, html, css, type CSSResultGroup} from '@alwatr/element';
 
-import {AlwatrDummyElement} from './dummy-element.js';
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-surface': AlwatrSurface;
+  }
+}
 
 /**
- * Alwatr Surface Base Element
+ * Alwatr Surface Element
  *
  * @extends AlwatrDummyElement
  *
@@ -22,7 +26,8 @@ import {AlwatrDummyElement} from './dummy-element.js';
  * @cssprop {Number} [--_surface-tint-opacity=0]
  * @cssprop {Number} [--_surface-state-opacity=0]
  */
-export class AlwatrSurfaceElement extends AlwatrDummyElement {
+@customElement('alwatr-surface')
+export class AlwatrSurface extends AlwatrDummyElement {
   static override styles: CSSResultGroup = css`
     :host {
       --_surface-color-on: var(--sys-color-on-surface-hsl);
@@ -34,6 +39,7 @@ export class AlwatrSurfaceElement extends AlwatrDummyElement {
       --_surface-state-opacity: 0;
 
       display: block;
+      padding: calc(2 * var(--sys-spacing-track));
       color: hsl(var(--_surface-color-on));
       background-color: hsl(var(--_surface-color-bg));
       box-shadow: var(--_surface-elevation);
@@ -137,4 +143,9 @@ export class AlwatrSurfaceElement extends AlwatrDummyElement {
       opacity: var(--sys-surface-disabled-outlined-opacity);
     }
   `;
+
+  override render(): unknown {
+    this._logger.logMethod('render');
+    return html`<slot></slot>`;
+  }
 }