@umbraco-ui/uui-tabs 1.0.0-alpha.0 → 1.0.0-rc.2

package/custom-elements.json

@@ -29,6 +29,18 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "href",
+          "description": "Set an href, this will turns the inner button into a anchor tag.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "target",
+          "description": "Set an anchor tag target, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "active",
           "description": "Set this boolean to true for then the related composition is sorted.",
@@ -37,7 +49,7 @@
         },
         {
           "name": "label",
-          "description": "Label to be used for aria-label and eventually as visual label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
           "type": "string"
         }
       ],
@@ -54,6 +66,20 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "Set an href, this will turns the inner button into a anchor tag.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "Set an anchor tag target, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "active",
           "attribute": "active",
@@ -64,11 +90,23 @@
         {
           "name": "label",
           "attribute": "label",
-          "description": "Label to be used for aria-label and eventually as visual label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
           "type": "string"
         }
       ],
       "slots": [
+        {
+          "name": "default",
+          "description": "for label"
+        },
+        {
+          "name": "icon",
+          "description": "for icon"
+        },
+        {
+          "name": "extra",
+          "description": "for extra"
+        },
         {
           "name": "",
           "description": "Override the default label"
@@ -108,6 +146,18 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "href",
+          "description": "Set an href, this will turns the inner button into a anchor tag.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "target",
+          "description": "Set an anchor tag target, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "active",
           "description": "Set this boolean to true for then the related composition is sorted.",
@@ -116,7 +166,7 @@
         },
         {
           "name": "label",
-          "description": "Label to be used for aria-label and eventually as visual label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
           "type": "string"
         }
       ],
@@ -133,6 +183,20 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "Set an href, this will turns the inner button into a anchor tag.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "Set an anchor tag target, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "active",
           "attribute": "active",
@@ -143,11 +207,23 @@
         {
           "name": "label",
           "attribute": "label",
-          "description": "Label to be used for aria-label and eventually as visual label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
           "type": "string"
         }
       ],
       "slots": [
+        {
+          "name": "default",
+          "description": "for label"
+        },
+        {
+          "name": "icon",
+          "description": "for icon"
+        },
+        {
+          "name": "extra",
+          "description": "for extra"
+        },
         {
           "name": "",
           "description": "Override the default label"

package/lib/index.js

@@ -2,6 +2,7 @@ import { ActiveMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { LitElement, html, css } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
 var __defProp$1 = Object.defineProperty;
@@ -28,11 +29,30 @@ let UUITabElement = class extends ActiveMixin(LabelMixin("", LitElement)) {
     }
   }
   render() {
-    return html`
-      <button type="button" ?disabled=${this.disabled} role="tab">
-        ${this.renderLabel()}
-      </button>
-    `;
+    return this.href ? html`
+          <a
+            id="button"
+            href=${ifDefined(!this.disabled ? this.href : void 0)}
+            target=${ifDefined(this.target || void 0)}
+            rel=${ifDefined(
+      this.target === "_blank" ? "noopener noreferrer" : void 0
+    )}
+            role="tab">
+            <slot name="icon"></slot>
+            ${this.renderLabel()}
+            <slot name="extra"></slot>
+          </a>
+        ` : html`
+          <button
+            type="button"
+            id="button"
+            ?disabled=${this.disabled}
+            role="tab">
+            <slot name="icon"></slot>
+            ${this.renderLabel()}
+            <slot name="extra"></slot>
+          </button>
+        `;
   }
 };
 UUITabElement.styles = [
@@ -42,7 +62,7 @@ UUITabElement.styles = [
         font-family: inherit;
       }
 
-      button {
+      #button {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -55,38 +75,35 @@ UUITabElement.styles = [
         min-height: 32px;
         font-size: inherit;
         height: 100%;
-        min-width: 75px;
+        min-width: 70px;
         background: none;
         color: inherit;
         cursor: pointer;
         font-family: inherit;
+
+        /* for anchor tag: */
+        text-decoration: none;
+        line-height: normal;
       }
 
-      :host(:not([active]):not([disabled])) button:hover {
-        color: var(
-          --uui-tab-text-hover,
-          var(--uui-color-default-emphasis, white)
-        );
+      :host(:not([active]):not([disabled])) #button:hover {
+        color: var(--uui-tab-text-hover, var(--uui-color-default-emphasis,#3544b1));
       }
 
-      :host(:not([active]):not([disabled])) button:active {
+      :host(:not([active]):not([disabled])) #button:active {
         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
           0 1px 2px rgba(0, 0, 0, 0.05);
       }
 
-      :host([active]) button {
-        color: var(
-          --uui-tab-text-active,
-          var(--uui-color-default-emphasis, white)
-        );
+      :host([active]) #button {
         cursor: default;
       }
-      :host([disabled]) button {
+      :host([disabled]) #button {
         color: var(--uui-color-disabled-contrast,#c4c4c4);
         cursor: default;
       }
 
-      button::before {
+      #button::before {
         content: '';
         position: absolute;
         height: 0px;
@@ -100,20 +117,21 @@ UUITabElement.styles = [
         opacity: 0;
         transition: opacity ease-in 120ms, height ease-in 120ms;
       }
-      button:hover::before {
+      #button:hover::before {
         background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
       }
-      :host([active]) button::before {
+      :host([active]) #button::before {
         opacity: 1;
         height: 4px;
         transition: opacity 120ms, height ease-out 120ms;
       }
 
-      :host([disabled]) button::before {
+      :host([disabled]) #button::before {
         background-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
       }
 
-      ::slotted(uui-icon) {
+      slot[name='icon']::slotted(*) {
+        font-size: 20px;
         margin-bottom: var(--uui-size-2,6px);
       }
     `
@@ -121,6 +139,12 @@ UUITabElement.styles = [
 __decorateClass$1([
   property({ type: Boolean, reflect: true })
 ], UUITabElement.prototype, "disabled", 2);
+__decorateClass$1([
+  property({ type: String })
+], UUITabElement.prototype, "href", 2);
+__decorateClass$1([
+  property({ type: String })
+], UUITabElement.prototype, "target", 2);
 UUITabElement = __decorateClass$1([
   defineElement("uui-tab")
 ], UUITabElement);
@@ -139,33 +163,33 @@ var __decorateClass = (decorators, target, key, kind) => {
 let UUITabGroupElement = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.tabElements = [];
-    this.onTabActive = (e) => {
+    this._tabElements = [];
+    this._onTabActive = (e) => {
       const selectedElement = e.currentTarget;
-      if (this.elementIsTabLike(selectedElement)) {
+      if (this._elementIsTabLike(selectedElement)) {
         selectedElement.active = true;
       }
-      const filtered = this.tabElements.filter((el) => el !== selectedElement);
+      const filtered = this._tabElements.filter((el) => el !== selectedElement);
       filtered.forEach((el) => {
-        if (this.elementIsTabLike(el)) {
+        if (this._elementIsTabLike(el)) {
           el.active = false;
         }
       });
     };
   }
-  setTabArray() {
-    this.tabElements = this.slotNodes ? this.slotNodes : [];
+  _setTabArray() {
+    this._tabElements = this._slottedNodes ? this._slottedNodes : [];
   }
-  onSlotChange() {
-    this.tabElements.forEach((el) => {
-      el.removeEventListener("click", this.onTabActive);
+  _onSlotChange() {
+    this._tabElements.forEach((el) => {
+      el.removeEventListener("click", this._onTabActive);
     });
-    this.setTabArray();
-    this.tabElements.forEach((el) => {
-      el.addEventListener("click", this.onTabActive);
+    this._setTabArray();
+    this._tabElements.forEach((el) => {
+      el.addEventListener("click", this._onTabActive);
     });
   }
-  elementIsTabLike(el) {
+  _elementIsTabLike(el) {
     return el instanceof UUITabElement || "active" in el;
   }
   connectedCallback() {
@@ -174,7 +198,7 @@ let UUITabGroupElement = class extends LitElement {
       this.setAttribute("role", "tablist");
   }
   render() {
-    return html` <slot @slotchange=${this.onSlotChange}></slot> `;
+    return html` <slot @slotchange=${this._onSlotChange}></slot> `;
   }
 };
 UUITabGroupElement.styles = [
@@ -198,7 +222,7 @@ __decorateClass([
     flatten: true,
     selector: "uui-tab, [uui-tab], [role=tab]"
   })
-], UUITabGroupElement.prototype, "slotNodes", 2);
+], UUITabGroupElement.prototype, "_slottedNodes", 2);
 UUITabGroupElement = __decorateClass([
   defineElement("uui-tab-group")
 ], UUITabGroupElement);

package/lib/uui-tab-group.element.d.ts

@@ -5,12 +5,12 @@ import { LitElement } from 'lit';
  */
 export declare class UUITabGroupElement extends LitElement {
     static styles: import("lit").CSSResult[];
-    private slotNodes?;
-    private tabElements;
-    private setTabArray;
-    private onSlotChange;
-    private onTabActive;
-    private elementIsTabLike;
+    private _slottedNodes?;
+    private _tabElements;
+    private _setTabArray;
+    private _onSlotChange;
+    private _onTabActive;
+    private _elementIsTabLike;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -3,6 +3,10 @@ declare const UUITabElement_base: (new (...args: any[]) => import("@umbraco-ui/u
 /**
  * A single tab. Should be put into `<uui-tab-group>`,
  * @element uui-tabs
+ * @slot default - for label
+ * @slot icon - for icon
+ * @slot extra - for extra
+ * @description - All-round tab-button
  * @cssprop --uui-tab-text - Define the tab text color
  * @cssprop --uui-tab-text-hover - Define the tab text hover color
  * @cssprop --uui-tab-text-active - Define the tab text active color
@@ -18,6 +22,20 @@ export declare class UUITabElement extends UUITabElement_base {
      * @default false
      */
     disabled: boolean;
+    /**
+     * Set an href, this will turns the inner button into a anchor tag.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * Set an anchor tag target, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top';
     constructor();
     private onHostClick;
     render(): import("lit-html").TemplateResult<1>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-tabs",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-rc.2",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.0.0-alpha.0"
+    "@umbraco-ui/uui-base": "1.0.0-rc.2"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -41,5 +41,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-tabs",
-  "gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
+  "gitHead": "436dd8d9fff81481feb88f06b461167c98dac91a"
 }