Tab Component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Accessible web components for the modern web",
   "files": [
     "dist"

src/tabs/README.md

@@ -0,0 +1,80 @@
+# Tabs
+
+<table width="100%">
+	<tr>
+		<td align="left" width="70%">
+        <p>Built by the super talented team at <strong><a href="https://www.travelopia.com/work-with-us/">Travelopia</a></strong>.</p>
+		</td>
+		<td align="center" width="30%">
+			<img src="https://www.travelopia.com/wp-content/themes/travelopia/assets/svg/logo-travelopia-circle.svg" width="50" />
+		</td>
+	</tr>
+</table>
+
+## Sample Usage
+
+Example:
+
+```js
+// Import the component as needed:
+import '@travelopia/web-components/dist/tabs';
+import '@travelopia/web-components/dist/tabs/style.css';
+
+// TypeScript usage:
+import { TPTabs } from '@travelopia/web-components';
+
+...
+
+const tabs: TPTabs = document.querySelector( 'tp-tabs' );
+tabs.setCurrentTab( 'overview' );
+```
+
+```html
+<tp-tabs current-tab="tab-1" update-url="yes"> <-- ID without the hash
+	<tp-tabs-nav>
+		<tp-tabs-nav-item active="yes">
+			<a href="#tab-1">Tab 1</a> <-- This component requires a link
+		</tp-tabs-nav-item>
+		<tp-tabs-nav-item>
+			<a href="#tab-2">Tab 2</a>
+		</tp-tabs-nav-item>
+		<tp-tabs-nav-item>
+			<a href="#tab-3">Tab 3</a>
+		</tp-tabs-nav-item>
+		<tp-tabs-nav-item>
+			<a href="#tab-4">Tab 4</a>
+		</tp-tabs-nav-item>
+	</tp-tabs-nav>
+	<tp-tabs-tab id="tab-1" open="yes">
+		<p>Tab 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+	</tp-tabs-tab>
+	<tp-tabs-tab id="tab-2">
+		<p>Tab 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+	</tp-tabs-tab>
+	<tp-tabs-tab id="tab-3">
+		<p>Tab 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+	</tp-tabs-tab>
+	<tp-tabs-tab id="tab-4">
+		<p>Tab 4: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+	</tp-tabs-tab>
+</tp-tabs>
+```
+
+## Attributes
+
+| Attribute   | Required | Values                  | Notes                                               |
+|-------------|----------|-------------------------|-----------------------------------------------------|
+| current-tab | Yes      | <id of the current tab> | This attribute controls which tab is currently open |
+| update-url  | No       | `yes`                    | Whether or not to update the has in the URL         |
+
+## Events
+
+| Event  | Notes                  |
+|--------|------------------------|
+| change | When a tab has changed |
+
+## Methods
+
+### `triggerTabSelection`
+
+Move to the tab with the given id.

src/tabs/index.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Web Component: Tabs</title>
+
+	<link rel="stylesheet" href="../../dist/tabs/style.css" media="all">
+	<script type="module" src="../../dist/tabs/index.js"></script>
+
+	<style>
+		tp-tabs-nav-item a {
+			text-decoration: none;
+			padding: 10px 20px;
+			border: 1px solid #f1f1f1;
+			display: inline-block;
+			color: #000;
+		}
+
+		tp-tabs-nav-item[active] a {
+			background-color: #ccc;
+		}
+	</style>
+
+</head>
+<body>
+<main>
+	<tp-tabs current-tab="tab-1" update-url="yes">
+		<tp-tabs-nav>
+			<tp-tabs-nav-item active="yes">
+				<a href="#tab-1">Tab 1</a>
+			</tp-tabs-nav-item>
+			<tp-tabs-nav-item>
+				<a href="#tab-2">Tab 2</a>
+			</tp-tabs-nav-item>
+			<tp-tabs-nav-item>
+				<a href="#tab-3">Tab 3</a>
+			</tp-tabs-nav-item>
+			<tp-tabs-nav-item>
+				<a href="#tab-4">Tab 4</a>
+			</tp-tabs-nav-item>
+		</tp-tabs-nav>
+		<tp-tabs-tab id="tab-1" open="yes">
+			<p>Tab 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+		</tp-tabs-tab>
+		<tp-tabs-tab id="tab-2">
+			<p>Tab 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+		</tp-tabs-tab>
+		<tp-tabs-tab id="tab-3">
+			<p>Tab 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+		</tp-tabs-tab>
+		<tp-tabs-tab id="tab-4">
+			<p>Tab 4: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+		</tp-tabs-tab>
+	</tp-tabs>
+</main>
+</body>
+</html>

src/tabs/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Styles.
+ */
+import './style.scss';
+
+/**
+ * Components.
+ */
+import { TPTabsNavItemElement } from './tp-tabs-nav-item';
+import { TPTabsNavElement } from './tp-tabs-nav';
+import { TPTabsTabElement } from './tp-tabs-tab';
+import { TPTabsElement } from './tp-tabs';
+
+/**
+ * Register Components.
+ */
+
+customElements.define( 'tp-tabs-nav-item', TPTabsNavItemElement );
+customElements.define( 'tp-tabs-nav', TPTabsNavElement );
+customElements.define( 'tp-tabs-tab', TPTabsTabElement );
+customElements.define( 'tp-tabs', TPTabsElement );

src/tabs/style.scss

@@ -0,0 +1,7 @@
+tp-tabs-tab {
+	display: none;
+
+	&[open="yes"] {
+		display: block;
+	}
+}

src/tabs/tp-tabs-nav-item.ts

@@ -0,0 +1,52 @@
+/**
+ * Internal dependencies.
+ */
+import { TPTabsElement } from './tp-tabs';
+
+/**
+ * TP Tabs Nav Item Element.
+ */
+export class TPTabsNavItemElement extends HTMLElement {
+	/**
+	 * Connected callback.
+	 */
+	connectedCallback(): void {
+		const link: HTMLAnchorElement | null = this.querySelector( 'a' );
+		link?.addEventListener( 'click', this.handleLinkClick.bind( this ) );
+	}
+
+	/**
+	 * Handle link click.
+	 *
+	 * @param {Event} e Click event.
+	 *
+	 * @protected
+	 */
+	protected handleLinkClick( e: Event ): void {
+		const tabs: TPTabsElement | null = this.closest( 'tp-tabs' );
+		const link: HTMLAnchorElement | null = this.querySelector( 'a' );
+		const anchor: string = link?.getAttribute( 'href' ) ?? '';
+
+		if ( ! tabs || ! link || '' === anchor ) {
+			return;
+		}
+
+		if ( 'yes' !== tabs.getAttribute( 'update-url' ) ) {
+			e.preventDefault();
+		}
+
+		tabs.setAttribute( 'current-tab', anchor.replace( '#', '' ) );
+	}
+
+	/**
+	 * Check if this component contains the link to the current tab.
+	 *
+	 * @param {string} currentTab Current tab ID.
+	 *
+	 * @return {boolean} Whether it is the current tab or not.
+	 */
+	isCurrentTab( currentTab: string = '' ): boolean {
+		const link: HTMLAnchorElement | null = this.querySelector( 'a' );
+		return `#${ currentTab }` === link?.getAttribute( 'href' );
+	}
+}

src/tabs/tp-tabs-nav.ts

@@ -0,0 +1,5 @@
+/**
+ * TP Tabs Nav Element.
+ */
+export class TPTabsNavElement extends HTMLElement {
+}

src/tabs/tp-tabs-tab.ts

@@ -0,0 +1,5 @@
+/**
+ * TP Tabs Tab Element.
+ */
+export class TPTabsTabElement extends HTMLElement {
+}

src/tabs/tp-tabs.ts

@@ -0,0 +1,107 @@
+/**
+ * Internal dependencies.
+ */
+
+import { TPTabsNavItemElement } from './tp-tabs-nav-item';
+import { TPTabsTabElement } from './tp-tabs-tab';
+
+/**
+ * TP Tabs.
+ */
+export class TPTabsElement extends HTMLElement {
+	/**
+	 * Connected callback.
+	 */
+	connectedCallback(): void {
+		this.updateTabFromUrlHash();
+		window.addEventListener( 'hashchange', this.updateTabFromUrlHash.bind( this ) );
+	}
+
+	/**
+	 * Get observed attributes.
+	 *
+	 * @return {Array} List of observed attributes.
+	 */
+	static get observedAttributes(): string[] {
+		return [ 'current-tab', 'update-url', 'overflow' ];
+	}
+
+	/**
+	 * Attribute changed callback.
+	 *
+	 * @param {string} name     Attribute name.
+	 * @param {string} oldValue Old value.
+	 * @param {string} newValue New value.
+	 */
+	attributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {
+		if ( oldValue === newValue ) {
+			return;
+		}
+
+		this.update();
+
+		if ( 'current-tab' === name ) {
+			this.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );
+		}
+	}
+
+	/**
+	 * Update this component.
+	 */
+	update(): void {
+		// Get current tab.
+		const currentTab: string = this.getAttribute( 'current-tab' ) ?? '';
+
+		// Check if current tab exists.
+		if ( ! this.querySelector( `tp-tabs-tab[id="${ currentTab }"]` ) ) {
+			return;
+		}
+
+		// Update nav items.
+		const navItems: NodeListOf<TPTabsNavItemElement> = this.querySelectorAll( 'tp-tabs-nav-item' );
+		if ( navItems ) {
+			navItems.forEach( ( navItem: TPTabsNavItemElement ): void => {
+				if ( navItem.isCurrentTab( currentTab ) ) {
+					navItem.setAttribute( 'active', 'yes' );
+				} else {
+					navItem.removeAttribute( 'active' );
+				}
+			} );
+		}
+
+		// Update tabs.
+		const tabs: NodeListOf<TPTabsTabElement> = this.querySelectorAll( 'tp-tabs-tab' );
+		if ( tabs ) {
+			tabs.forEach( ( tab: TPTabsTabElement ): void => {
+				if ( currentTab === tab.getAttribute( 'id' ) ) {
+					tab.setAttribute( 'open', 'yes' );
+				} else {
+					tab.removeAttribute( 'open' );
+				}
+			} );
+		}
+	}
+
+	/**
+	 * Update tab from URL hash.
+	 */
+	updateTabFromUrlHash(): void {
+		if ( 'yes' !== this.getAttribute( 'update-url' ) ) {
+			return;
+		}
+
+		const urlHash: string = window.location.hash;
+		if ( '' !== urlHash ) {
+			this.setAttribute( 'current-tab', urlHash.replace( '#', '' ) );
+		}
+	}
+
+	/**
+	 * Set current tab.
+	 *
+	 * @param {string} tabId Tab ID.
+	 */
+	setCurrentTab( tabId: string = '' ): void {
+		this.setAttribute( 'current-tab', tabId );
+	}
+}

webpack.config.js

@@ -78,6 +78,7 @@ module.exports = ( env ) => {
 		entry: {
 			modal: './src/modal/index.ts',
 			slider: './src/slider/index.ts',
+			tabs: './src/tabs/index.ts',
 			form: './src/form/index.ts',
 		},
 		module: {