@neovici/cosmoz-tabs 5.2.0 → 5.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-tabs",
-	"version": "5.2.0",
+	"version": "5.4.0",
 	"description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
 	"keywords": [
 		"web-components"
@@ -15,21 +15,19 @@
 	},
 	"license": "Apache-2.0",
 	"author": "Neovici Development <dev@neovici.se>",
-	"main": "cosmoz-tabs.js",
+	"main": "src/index.js",
 	"directories": {
 		"test": "test"
 	},
 	"files": [
-		"cosmoz-*.js",
-		"lib/**/*.js"
+		"src/**/*.js"
 	],
 	"scripts": {
 		"lint": "eslint --cache --ext .js .",
 		"lint-tsc": "tsc",
-		"start": "npm run storybook",
+		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
-		"storybook": "start-storybook --node-resolve --watch --open",
 		"storybook:build": "build-storybook",
 		"storybook:deploy": "storybook-to-ghpages",
 		"prepare": "husky install"
@@ -53,8 +51,17 @@
 			"@commitlint/config-conventional"
 		]
 	},
+	"exports": {
+		".": "./src/index.js",
+		"./cosmoz-tabs": "./src/cosmoz-tabs.js",
+		"./cosmoz-tab": "./src/cosmoz-tab.js",
+		"./cosmoz-tab-card": "./src/cosmoz-tab-card.js",
+		"./cosmoz-tab-card.js": "./src/cosmoz-tab-card.js",
+		"./next/*": "./src/next/*"
+	},
 	"dependencies": {
-		"@neovici/cosmoz-utils": "^3.21.0",
+		"@neovici/cosmoz-page-router": "^8.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,21 +69,19 @@
 		"lit-html": "^1.4.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^13.0.0",
-		"@commitlint/config-conventional": "^13.0.0",
-		"@neovici/eslint-config": "^1.3.0",
-		"@open-wc/demoing-storybook": "^2.4.0",
+		"@commitlint/cli": "^17.0.0",
+		"@commitlint/config-conventional": "^17.0.0",
+		"@neovici/cfg": "^1.11.0",
 		"@open-wc/testing": "^2.5.0",
 		"@polymer/iron-list": "^3.1.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@storybook/storybook-deployer": "^2.8.0",
+		"@web/dev-server-storybook": "^0.5.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",
+		"husky": "^8.0.0",
+		"semantic-release": "^19.0.0",
+		"sinon": "^14.0.0",
 		"typescript": "^4.4.0"
 	}
 }

package/{cosmoz-tab-card.js → src/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-tab.js → src/cosmoz-tab.js}

@@ -4,7 +4,7 @@ import {
 	html,
 	component
 } from 'haunted';
-import { useTab } from './lib/use-tab';
+import { useTab } from './use-tab';
 
 /**
 

package/{cosmoz-tabs.js → src/cosmoz-tabs.js}

@@ -1,7 +1,7 @@
 // @license Copyright (C) 2015 Neovici AB - Apache 2 License
 import { html, component } from 'haunted';
-import { useTabs } from './lib/use-tabs';
-import { style, renderTab } from './lib/render';
+import { useTabs } from './use-tabs';
+import { style, renderTab } from './render';
 import './cosmoz-tab.js';
 import '@polymer/iron-icon';
 import '@polymer/iron-icons';

package/src/index.js

@@ -0,0 +1 @@
+import './cosmoz-tabs';

package/src/next/cosmoz-tab.css.js

@@ -0,0 +1,68 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+
+export default css`
+	:host {
+		position: relative;
+		display: flex;
+		box-sizing: border-box;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		padding: 11px 24px;
+		color: inherit;
+		text-decoration: none;
+		text-align: center;
+		letter-spacing: 0.3px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		cursor: pointer;
+		/* TODO(accessibility): focused tab should be outlined */
+		outline: 0;
+	}
+
+	:host([active]) {
+		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;
+	}
+
+	:host([disabled]) {
+		opacity: 0.4;
+		pointer-events: none;
+	}
+
+	#iconSlot::slotted(*) {
+		flex-shrink: 0;
+	}
+
+	#contentSlot::slotted(*) {
+		flex: auto;
+	}
+
+	.badge {
+		font-family: var(--cosmoz-font-base, 'Verdana, Arial, sans-serif');
+		font-weight: normal;
+		font-size: 11px;
+		line-height: 1;
+		border-radius: 0.90909em;
+		box-sizing: border-box;
+
+		transform: translateY(-50%);
+		vertical-align: top;
+		min-width: 1.81818em;
+		padding: 0.40909em 0.36363em;
+
+		max-width: 80px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+
+		background-color: var(--accent-color, #ff4081);
+		color: #ffffff;
+		text-align: center;
+	}
+
+	a {
+		display: contents;
+	}
+`;

package/src/next/cosmoz-tab.js

@@ -0,0 +1,53 @@
+import { component, useEffect, useLayoutEffect } from 'haunted';
+import { html, nothing } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import computeScroll from 'compute-scroll-into-view';
+
+import style from './cosmoz-tab.css';
+
+const Tab = (host) => {
+	const { active, badge, href } = host;
+
+	useEffect(() => {
+		if (!host.getAttribute('tabindex')) {
+			host.setAttribute('tabindex', '-1');
+		}
+		host.setAttribute('role', 'tab');
+	}, []);
+
+	useLayoutEffect(() => {
+		const el = host;
+		el.toggleAttribute('aria-selected', !!active);
+
+		if (!active) {
+			return;
+		}
+		computeScroll(el, {
+			block: 'nearest',
+			inline: 'center',
+			boundary: el.parentElement,
+		}).forEach(({ el, top, left }) =>
+			el.scroll({ top, left, behavior: 'smooth' })
+		);
+	}, [active]);
+
+	return html`
+		<style>
+			${style}
+		</style>
+		<a part="link" href=${ifDefined(href)}>
+			<slot id="iconSlot" name="icon"></slot>
+			<slot id="contentSlot"></slot>
+			${badge
+				? html`<span class="badge" part="badge">${badge}</span>`
+				: nothing}
+		</a>
+	`;
+};
+
+customElements.define(
+	'cosmoz-tab-next',
+	component(Tab, {
+		observedAttributes: ['active', 'badge', 'href'],
+	})
+);

package/src/next/cosmoz-tabs.css.js

@@ -0,0 +1,22 @@
+import { tagged as css } from '@neovici/cosmoz-utils';
+
+export default css`
+	:host {
+		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;
+	}
+	:host::-webkit-scrollbar {
+		display: none;
+	}
+`;

package/src/next/cosmoz-tabs.js

@@ -0,0 +1,17 @@
+import { html, component, useEffect } from 'haunted';
+import style from './cosmoz-tabs.css';
+
+const Tabs = (host) => {
+	useEffect(() => {
+		host.setAttribute('role', 'tablist');
+	}, []);
+
+	return html`
+		<style>
+			${style}
+		</style>
+		<slot></slot>
+	`;
+};
+
+customElements.define('cosmoz-tabs-next', component(Tabs));

package/src/next/index.js

@@ -0,0 +1,4 @@
+import './cosmoz-tabs';
+import './cosmoz-tab';
+
+export * from './use-tabs';

package/src/next/use-tabs.js

@@ -0,0 +1,50 @@
+/* eslint-disable import/group-exports */
+import { html, useMemo, useCallback, useRef } from 'haunted';
+import { useHashParam } from '@neovici/cosmoz-page-router/lib/use-hash-param';
+
+const isValid = (tab) => !tab.hidden && !tab.disabled,
+	valid = (tabs) => tabs.find(isValid),
+	choose = (tabs, name) => {
+		const tab = name && tabs.find((tab) => tab.name === name);
+		return tab && isValid(tab) ? tab : valid(tabs);
+	};
+
+export const useTabs = (tabs, { hashParam }) => {
+	const [name, activate] = useHashParam(hashParam),
+		ref = useRef([]),
+		active = useMemo(() => choose(tabs, name), [tabs, name]),
+		activated = useMemo(() => {
+			const name = active.name;
+			return (ref.current = [...ref.current.filter((i) => i !== name), name]);
+		}, [active]),
+		onActivate = useCallback(
+			(e) => {
+				if (e.button !== 0 || e.metaKey || e.ctrlKey) {
+					return;
+				}
+				const { name } = e.currentTarget;
+				activate(name);
+			},
+			[activate]
+		);
+
+	return {
+		tabs,
+		active,
+		activated,
+		activate,
+		onActivate,
+	};
+};
+
+export const renderTabs = ({ tabs, active, onActivate }) =>
+	tabs.map(
+		(tab) => html`<cosmoz-tab-next
+			name=${tab.name}
+			?active=${active.name === tab.name}
+			?hidden=${tab.hidden}
+			?disabled=${tab.disabled}
+			@click=${onActivate}
+			>${tab.title}</cosmoz-tab-next
+		>`
+	);

package/{lib → src}/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';
 
@@ -48,7 +48,7 @@ const useTabSelectedEffect = (host, selectedTab) => {
 				selected, hashParam
 			} = host,
 			[tabs, setTabs] = useState([]),
-			param = useHashParam(hashParam),
+			[param] = useHashParam(hashParam),
 			selection = hashParam == null || param == null && selected != null ? selected : param,
 			selectedTab = useMemo(() => choose(tabs, selection), [tabs, selection]);
 
@@ -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/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
-};