@umbraco-ui/uui-card-user 0.0.2 → 0.1.0

package/README.md

@@ -1,5 +1,9 @@
 # uui-card-user
 
+### See it in action
+
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-card-user)
+
 ## Usage
 
 ```zsh
@@ -9,13 +13,13 @@ npm i @umbraco-ui/uui-card-user
 Import the registration of `<uui-card-user>` via:
 
 ```javascript
-import '@umbraco-ui/uui-card-user/lib';
+import '@umbraco-ui/uui-card-user';
 ```
 
 When looking to leverage the `UUICardUserElement` base class as a type and/or for extension purposes, do so via:
 
 ```javascript
-import { UUICardUserElement } from '@umbraco-ui/uui-card-user/lib/uui-card-user.element';
+import { UUICardUserElement } from '@umbraco-ui/uui-card-user';
 ```
 
 ## Example

package/custom-elements.json

@@ -90,20 +90,30 @@
       "events": [
         {
           "name": "open",
-          "description": "fires when the user card title is clicked"
+          "description": "fires when the card title is clicked"
         },
         {
           "name": "selected",
-          "description": "fires when the card is selected"
-        },
-        {
-          "name": "select",
           "description": "fires when the media card is selected"
         },
         {
-          "name": "unselect",
+          "name": "unselected",
           "description": "fires when the media card is unselected"
         }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "slot for the default content area"
+        },
+        {
+          "name": "tag",
+          "description": "slot for the tag with support for `<uui-tag>` elements"
+        },
+        {
+          "name": "actions",
+          "description": "slot for the actions with support for the `<uui-action-bar>` element"
+        }
       ]
     }
   ]

package/lib/index.d.ts

@@ -1 +1 @@
-export {};
+export * from './uui-card-user.element';

package/lib/index.js

@@ -1,6 +1,8 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import { UUICardElement } from '@umbraco-ui/uui-card/lib';
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { UUICardElement } from '@umbraco-ui/uui-card/lib/uui-card.element';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,15 +15,17 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class UUICardUserElement extends UUICardElement {
+let UUICardUserElement = class extends UUICardElement {
   constructor() {
     super(...arguments);
     this.name = "";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    demandCustomElement(this, "uui-avatar");
+  }
   render() {
     return html`
-      <slot name="tag"></slot>
-      <slot name="actions"></slot>
       <uui-avatar id="avatar" name=${this.name} size="m"></uui-avatar>
       <div
         id="open-part"
@@ -31,9 +35,11 @@ class UUICardUserElement extends UUICardElement {
         <span> ${this.name} </span>
       </div>
       <slot></slot>
+      <slot name="tag"></slot>
+      <slot name="actions"></slot>
     `;
   }
-}
+};
 UUICardUserElement.styles = [
   ...UUICardElement.styles,
   css`
@@ -46,7 +52,7 @@ UUICardUserElement.styles = [
       }
 
       slot:not([name])::slotted(*) {
-        font-size: var(--uui-size-4,12px);
+        font-size: var(--uui-type-small-size,12px);
         line-height: var(--uui-size-6,18px);
       }
 
@@ -113,5 +119,8 @@ UUICardUserElement.styles = [
 __decorateClass([
   property({ type: String })
 ], UUICardUserElement.prototype, "name", 2);
+UUICardUserElement = __decorateClass([
+  defineElement("uui-card-user")
+], UUICardUserElement);
 
-customElements.define("uui-card-user", UUICardUserElement);
+export { UUICardUserElement };

package/lib/uui-card-user.element.d.ts

@@ -1,9 +1,10 @@
-import { UUICardElement } from '@umbraco-ui/uui-card/lib/uui-card.element';
+import { UUICardElement } from '@umbraco-ui/uui-card/lib';
 /**
  *  @element uui-card-user
- *  @fires {UUICardEvent} open - fires when the user card title is clicked
- *  @fires {UUICardEvent} selected - fires when the card is selected
  *  @description - Card component for displaying a user node.
+ *  @slot - slot for the default content area
+ *  @slot tag - slot for the tag with support for `<uui-tag>` elements
+ *  @slot actions - slot for the actions with support for the `<uui-action-bar>` element
  */
 export declare class UUICardUserElement extends UUICardElement {
     static styles: import("lit").CSSResult[];
@@ -14,5 +15,11 @@ export declare class UUICardUserElement extends UUICardElement {
      * @default ''
      */
     name: string;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-card-user': UUICardUserElement;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-card-user",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -20,19 +20,20 @@
   "bugs": {
     "url": "https://github.com/umbraco/Umbraco.UI/issues"
   },
-  "main": "./dist/index.js",
+  "main": "./lib/index.js",
   "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
   "customElements": "custom-elements.json",
   "files": [
-    "dist",
     "lib/**/*.d.ts",
     "lib/**/*.js",
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-avatar": "^0.0.15",
-    "@umbraco-ui/uui-base": "0.0.15",
-    "@umbraco-ui/uui-card": "0.0.2"
+    "@umbraco-ui/uui-avatar": "0.1.0",
+    "@umbraco-ui/uui-base": "0.1.0",
+    "@umbraco-ui/uui-card": "0.1.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -43,5 +44,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-card-user",
-  "gitHead": "2a640ce4460de94e9c92a97310e27b84bbd6edda"
+  "gitHead": "9ed7860ce865d310b85bd1718f37b59db873aefd"
 }

package/lib/uui-card-user.element.js

@@ -1,117 +0,0 @@
-import { css, html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { UUICardElement } from '@umbraco-ui/uui-card/lib/uui-card.element';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
-};
-class UUICardUserElement extends UUICardElement {
-  constructor() {
-    super(...arguments);
-    this.name = "";
-  }
-  render() {
-    return html`
-      <slot name="tag"></slot>
-      <slot name="actions"></slot>
-      <uui-avatar id="avatar" name=${this.name} size="m"></uui-avatar>
-      <div
-        id="open-part"
-        tabindex=${this.disabled ? nothing : "0"}
-        @click=${this.handleOpenClick}
-        @keydown=${this.handleOpenKeydown}>
-        <span> ${this.name} </span>
-      </div>
-      <slot></slot>
-    `;
-  }
-}
-UUICardUserElement.styles = [
-  ...UUICardElement.styles,
-  css`
-      :host {
-        min-width: 250px;
-        flex-direction: column;
-        justify-content: space-between;
-        padding: var(--uui-size-3,9px);
-        align-items: center;
-      }
-
-      slot:not([name])::slotted(*) {
-        font-size: var(--uui-size-4,12px);
-        line-height: var(--uui-size-6,18px);
-      }
-
-      ::slotted(*) {
-        text-align: center;
-      }
-
-      slot[name='tag'] {
-        position: absolute;
-        top: 6px;
-        right: 6px;
-        display: flex;
-        justify-content: right;
-      }
-
-      slot[name='actions'] {
-        position: absolute;
-        top: var(--uui-size-4,12px);
-        right: var(--uui-size-4,12px);
-        display: flex;
-        justify-content: right;
-
-        opacity: 0;
-        transition: opacity 120ms;
-      }
-      :host(:focus) slot[name='actions'],
-      :host(:focus-within) slot[name='actions'],
-      :host(:hover) slot[name='actions'] {
-        opacity: 1;
-      }
-
-      #avatar {
-        margin: var(--uui-size-3,9px);
-      }
-
-      slot[name='icon']::slotted(*) {
-        font-size: 1.2em;
-      }
-
-      #open-part {
-        display: flex;
-        position: relative;
-        font-weight: 700;
-        align-items: center;
-        cursor: pointer;
-        margin: 0 0 3px 0;
-      }
-
-      :host([disabled]) #open-part {
-        pointer-events: none;
-      }
-
-      #open-part > span {
-        vertical-align: center;
-        margin-top: 3px;
-      }
-
-      #open-part:hover {
-        text-decoration: underline;
-        color: var(--uui-interface-contrast-hover,#1b264f);
-      }
-    `
-];
-__decorateClass([
-  property({ type: String })
-], UUICardUserElement.prototype, "name", 2);
-
-export { UUICardUserElement };