feat: initialize cosmoz-tabs-next

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;
+	}
+`;

src/next/cosmoz-tab.js

@@ -0,0 +1,50 @@
+import { html, component, useLayoutEffect } from 'haunted';
+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;
+
+	useLayoutEffect(() => {
+		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>
+			<span class="badge" part="badge">${badge}</span>
+		</a>
+	`;
+};
+
+customElements.define(
+	'cosmoz-tab-next',
+	component(Tab, {
+		observedAttributes: ['active', 'badge', 'href'],
+	})
+);

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;
+	}
+`;

src/next/cosmoz-tabs.js

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

src/next/index.js

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

stories/cosmoz-tabs-next.stories.js

@@ -0,0 +1,25 @@
+import { html } from 'haunted';
+
+import '../src/next';
+
+export default {
+	title: 'Tabs (next)',
+	component: 'cosmoz-tabs-next',
+};
+
+const basics = () => html`
+	<cosmoz-tabs-next>
+		<cosmoz-tab-next disabled>Tab1</cosmoz-tab-next>
+		<cosmoz-tab-next disabled badge="2">Tab2</cosmoz-tab-next>
+		<cosmoz-tab-next hidden badge="3">Tab3</cosmoz-tab-next>
+		<cosmoz-tab-next badge="4" active href="#123">Tab4</cosmoz-tab-next>
+		${Array(6)
+			.fill()
+			.map(
+				(_, i) =>
+					html`<cosmoz-tab-next badge=${5 + i}>Tab ${5 + i}</cosmoz-tab-next>`
+			)}
+	</cosmoz-tabs-next>
+`;
+
+export { basics };