@umbraco-ui/uui-card 0.0.2 → 0.1.0

package/README.md

@@ -2,6 +2,10 @@
 
 ![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card?logoColor=%231B264F)
 
+### See it in action
+
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-card)
+
 ## Installation
 
 ### ES imports
@@ -13,7 +17,7 @@ npm i @umbraco-ui/uui-card
 ## Usage
 
 ```javascript
-import { UUICardElement } from '@umbraco-ui/uui-card/lib/uui-card.element';
+import { UUICardElement } from '@umbraco-ui/uui-card';
 
 class MyCardElement extends UUICardElement {}
 ```

package/custom-elements.json

@@ -77,14 +77,14 @@
       "events": [
         {
           "name": "open",
-          "description": "fires when the media card title is clicked"
+          "description": "fires when the card title is clicked"
         },
         {
-          "name": "select",
+          "name": "selected",
           "description": "fires when the media card is selected"
         },
         {
-          "name": "unselect",
+          "name": "unselected",
           "description": "fires when the media card is unselected"
         }
       ]

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './uui-card.element';
+export * from './UUICardEvent';

package/lib/{uui-card.element.js → index.js}

@@ -1,6 +1,7 @@
+import { SelectOnlyMixin, SelectableMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { LitElement, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { SelectOnlyMixin, SelectableMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
 class UUICardEvent extends UUIEvent {
@@ -18,7 +19,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class UUICardElement extends SelectOnlyMixin(SelectableMixin(LitElement)) {
+let UUICardElement = class extends SelectOnlyMixin(SelectableMixin(LitElement)) {
   constructor() {
     super(...arguments);
     this.disabled = false;
@@ -39,7 +40,7 @@ class UUICardElement extends SelectOnlyMixin(SelectableMixin(LitElement)) {
     e.stopPropagation();
     this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
   }
-}
+};
 UUICardElement.styles = [
   css`
       :host {
@@ -48,8 +49,7 @@ UUICardElement.styles = [
         width: 100%;
         justify-content: center;
         box-sizing: border-box;
-        /* TODO: fix automatic fallback values for shadows before we use them: var(--uui-shadow-depth-1)*/
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        box-shadow: var(--uui-shadow-depth-1,0 1px 3px rgba(0,0,0,0.12) , 0 1px 2px rgba(0,0,0,0.24));
         border-radius: var(--uui-border-radius,3px);
         min-height: var(--uui-layout-medium);
         background-color: var(--uui-interface-surface,#fefefe);
@@ -109,17 +109,7 @@ UUICardElement.styles = [
       }
 
       :host([selectable]:not([selected]):hover) #select-border::after {
-        -webkit-animation: not-selected--hover 1.2s infinite;
-                animation: not-selected--hover 1.2s infinite;
-      }
-      @-webkit-keyframes not-selected--hover {
-        0%,
-        100% {
-          opacity: 0.66;
-        }
-        50% {
-          opacity: 1;
-        }
+        animation: not-selected--hover 1.2s infinite;
       }
       @keyframes not-selected--hover {
         0%,
@@ -132,17 +122,7 @@ UUICardElement.styles = [
       }
 
       :host([selectable][selected]:hover) #select-border::after {
-        -webkit-animation: selected--hover 1.4s infinite;
-                animation: selected--hover 1.4s infinite;
-      }
-      @-webkit-keyframes selected--hover {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.66;
-        }
+        animation: selected--hover 1.4s infinite;
       }
       @keyframes selected--hover {
         0%,
@@ -154,8 +134,7 @@ UUICardElement.styles = [
         }
       }
       :host([selectable]) #open-part:hover + #select-border::after {
-        -webkit-animation: none;
-                animation: none;
+        animation: none;
       }
       :host([error])::after {
         inset: calc(var(--uui-card-border-width) * -2);
@@ -175,5 +154,8 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UUICardElement.prototype, "error", 2);
+UUICardElement = __decorateClass([
+  defineElement("uui-card")
+], UUICardElement);
 
-export { UUICardElement };
+export { UUICardElement, UUICardEvent };

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

@@ -2,9 +2,7 @@ import { LitElement } from 'lit';
 declare const UUICardElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectOnlyMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectableMixinInterface) & typeof LitElement;
 /**
  *  @element uui-card
- *  @fires {UUICardEvent} open - fires when the media card title is clicked
- *  @fires {UUISelectableEvent} select - fires when the media card is selected
- *  @fires {UUISelectableEvent} unselect - fires when the media card is unselected
+ *  @fires {UUICardEvent} open - fires when the card title is clicked
  *  @description - Base card component to be extended by specific cards.
  */
 export declare class UUICardElement extends UUICardElement_base {
@@ -27,4 +25,9 @@ export declare class UUICardElement extends UUICardElement_base {
     protected handleOpenClick(e: Event): void;
     protected handleOpenKeydown(e: KeyboardEvent): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-card': UUICardElement;
+    }
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-card",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -19,17 +19,18 @@
   "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-base": "0.0.15"
+    "@umbraco-ui/uui-base": "0.1.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -40,5 +41,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-card",
-  "gitHead": "2a640ce4460de94e9c92a97310e27b84bbd6edda"
+  "gitHead": "9ed7860ce865d310b85bd1718f37b59db873aefd"
 }