@neovici/cosmoz-tabs 5.1.2 → 5.3.0

package/cosmoz-tab-card.js

@@ -60,7 +60,7 @@ const CosmozTabCard = ({ heading }) => html`
 </style>
 
 <div id="header" part="header">
-	<h1 class="heading">${ heading }<slot name="after-title"></slot></h1>
+	<h1 class="heading" part="heading">${ heading }<slot name="after-title"></slot></h1>
 	<slot name="card-actions"></slot>
 </div>
 

package/cosmoz-tabs.js

@@ -17,8 +17,8 @@ using tabs.
 
 The following custom properties and mixins are available for styling:
 
-Custom property | Description | Default
-----------------|-------------|----------
+Custom property                     | Description                 | Default
+------------------------------------|-----------------------------|----------
 `--cosmoz-tabs-selection-bar-color` | Color for the selection bar | `#00b4db`
 
 */
@@ -28,6 +28,7 @@ const Tabs = host => {
 	return html`
 		<style>${ style }</style>
 		<div class="tabs" part="tabs" role="tablist">
+			<slot name="tabs"></slot>
 			${ tabs.map(renderTab(opts)) }
 		</div>
 

package/lib/render.js

@@ -12,17 +12,20 @@ const style = `
 }
 
 .tabs {
-	background-color: #fff;
-	margin-bottom: 3px;
-	box-shadow: var(--cosmoz-shadow-2dp, var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5));
+	background-color: var(--cosmoz-tabs-bg-color, #fff);
+	color: var(--cosmoz-tabs-text-color, #606c7e);
+	font-family: var(--cosmoz-tabs-font-family, inherit);
+	font-size: var(--cosmoz-tabs-font-size, 13px);
+	line-height: var(--cosmoz-tabs-line-height, 19px);
+	box-shadow: var(--cosmoz-tabs-shadow, inset 0 -1px 0 0 #e5e6eb);
 	flex: none;
 	display: flex;
 	align-items: center;
 	overflow-x:  auto;
 	-webkit-overflow-scrolling: auto;
 	scrollbar-width: none;
+	padding-bottom: 1px;
 }
-
 .tabs::-webkit-scrollbar {
 	display: none;
 }
@@ -30,16 +33,15 @@ const style = `
 .tab {
 	position: relative;
 	display: flex;
+	box-sizing: border-box;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-	padding: 0.767em 24px;
+	padding: 11px 24px;
 	color: inherit;
 	text-decoration: none;
 	text-align: center;
-	font-size: 1.0714286em;
-	line-height: 1.27;
-	font-weight: 300;
+	letter-spacing: 0.3px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	cursor: pointer;
@@ -48,12 +50,14 @@ const style = `
 }
 
 .tab[aria-selected] {
-	box-shadow: inset 0 -1.4px 0px 0px var(--cosmoz-tabs-selection-bar-color, #00b4db);
-	font-weight: 400;
+	color: var(--cosmoz-tabs-accent-color, #508aef);
+	box-shadow: inset 0 -3px 0px 0px var(--cosmoz-tabs-accent-color, #508aef);
+	font-weight: 700;
+	letter-spacing: 0;
 }
 
 .tab[disabled] {
-	opacity: 0.65;
+	opacity: 0.4;
 	pointer-events: none;
 }
 
@@ -101,10 +105,11 @@ const style = `
 		selectedTab,
 		onSelect,
 		href
-	}) => tab => {
+	}) => (tab, i, tabs) => {
 		const isSelected = selectedTab === tab,
 			icon = getIcon(tab, isSelected);
 		return html`<a class="tab" tabindex="-1" role="tab"
+			part=${ ['tab', i === 0 && 'first-tab', i === tabs.length - 1 && 'last-tab', isSelected && 'selected-tab'].filter(Boolean).join(' ') }
 			?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
 			?aria-selected=${ isSelected }
 			@click=${ onSelect }

package/lib/use-tabs.js

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useCallback } from 'haunted';
 import { notifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
-import { useHashParam, link } from './use-hash-param';
+import { useHashParam, link } from '@neovici/cosmoz-page-router/lib/use-hash-param';
 import { choose, collect, getName, isValid } from './utils';
 import computeScroll from 'compute-scroll-into-view';
 
@@ -89,9 +89,7 @@ const useTabSelectedEffect = (host, selectedTab) => {
 
 				e.preventDefault();
 				window.history.pushState({}, '', href(tab));
-				// TODO: drop this when we drop iron-location/cosmoz-page-location
-				requestAnimationFrame(() => window.dispatchEvent(new CustomEvent('location-changed')));
-				requestAnimationFrame(() => window.dispatchEvent(new CustomEvent('hash-changed')));
+				requestAnimationFrame(() => window.dispatchEvent(new CustomEvent('hashchange')));
 			}, []),
 			href
 		};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-tabs",
-	"version": "5.1.2",
+	"version": "5.3.0",
 	"description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
 	"keywords": [
 		"web-components"
@@ -54,7 +54,8 @@
 		]
 	},
 	"dependencies": {
-		"@neovici/cosmoz-utils": "^3.21.0",
+		"@neovici/cosmoz-page-router": "^7.0.0",
+		"@neovici/cosmoz-utils": "^3.25.0",
 		"@polymer/iron-icon": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
 		"compute-scroll-into-view": "^1.0.17",
@@ -62,9 +63,9 @@
 		"lit-html": "^1.4.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^13.0.0",
-		"@commitlint/config-conventional": "^13.0.0",
-		"@neovici/eslint-config": "^1.3.0",
+		"@commitlint/cli": "^16.0.0",
+		"@commitlint/config-conventional": "^16.0.0",
+		"@neovici/cfg": "^1.11.0",
 		"@open-wc/demoing-storybook": "^2.4.0",
 		"@open-wc/testing": "^2.5.0",
 		"@polymer/iron-list": "^3.1.0",
@@ -72,11 +73,9 @@
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.0",
 		"@web/test-runner": "^0.13.18",
-		"@web/test-runner-selenium": "^0.5.2",
-		"eslint": "^7.32.0",
 		"husky": "^7.0.0",
-		"semantic-release": "^18.0.0",
-		"sinon": "^11.1.0",
+		"semantic-release": "^19.0.0",
+		"sinon": "^13.0.0",
 		"typescript": "^4.4.0"
 	}
 }

package/lib/use-hash-param.js

@@ -1,40 +0,0 @@
-import {
-	useState, useEffect, useMemo
-} from 'haunted';
-
-const hashUrl = () => new URL(location.hash.replace(/^#!?/iu, '').replace('%23', '#'), location.origin),
-	parameterize = hashParam => hashParam ? () => new URLSearchParams(hashUrl().hash.replace('#', '')).get(hashParam) : undefined,
-	link = (hashParam, value) => {
-		if (!hashParam) {
-			return;
-		}
-		const url = hashUrl(),
-			sp = new URLSearchParams(url.hash.replace('#', ''));
-		sp.set(hashParam, value);
-		return '#!' + Object.assign(url, { hash: sp }).href.replace(location.origin, '');
-	},
-	useHashParam = hashParam => {
-		const parameterized = useMemo(() => parameterize(hashParam), [hashParam]),
-			[param, setParam] = useState(parameterized);
-
-		useEffect(() => {
-			if (parameterized == null) {
-				return;
-			}
-			const readParam = () => requestAnimationFrame(() => setParam(parameterized));
-			readParam();
-			window.addEventListener('popstate', readParam);
-			window.addEventListener('hash-changed', readParam);
-			return () => {
-				window.removeEventListener('popstate', readParam);
-				window.removeEventListener('hash-changed', readParam);
-			};
-		}, [parameterized]);
-
-		return param;
-	};
-
-export {
-	link,
-	useHashParam
-};