Merge pull request #14628 from ckeditor/ci/3431-pfoe-guide

Docs (ckeditor5): Created the `window.createTabs()` docs helper with styles.
ckeditor · Jul 26, 2023 · 43055d8 · 43055d8
2 parents d87a09f + 88670d0
commit 43055d8
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/docs/assets/snippet.js b/docs/assets/snippet.js
@@ -122,3 +122,33 @@ window.getViewportTopOffsetConfig = function() {
 
 	return parseInt( window.getComputedStyle( documentElement ).getPropertyValue( '--ck-snippet-viewport-top-offset' ) );
 };
+
+/**
+ * Activates tabs in the given container.
+ *
+ * **Note**: The tabs container requires a proper markup to work correctly.
+ *
+ * @param {HTMLElement} tabsContainer
+ */
+window.createTabs = function( tabsContainer ) {
+	const tabTextElements = Array.from( tabsContainer.querySelectorAll( '.tabs__list__tab-text' ) );
+	const tabPanels = Array.from( tabsContainer.querySelectorAll( '.tabs__panel' ) );
+
+	tabTextElements.forEach( tabTextElement => {
+		tabTextElement.addEventListener( 'click', evt => {
+			const clickedIndex = tabTextElements.indexOf( tabTextElement );
+
+			tabTextElements.forEach( element => {
+				element.parentElement.classList.toggle( 'tabs__list__tab_selected', tabTextElement === element );
+				element.setAttribute( 'aria-selected', tabTextElement === element );
+			} );
+
+			tabPanels.forEach( panel => {
+				panel.classList.toggle( 'tabs__panel_selected', tabPanels.indexOf( panel ) === clickedIndex );
+			} );
+
+			evt.preventDefault();
+		} );
+	} );
+};
+
diff --git a/docs/assets/styles.css b/docs/assets/styles.css
@@ -66,3 +66,58 @@ https://github.com/ckeditor/ckeditor5-build-decoupled-document/issues/12 */
 .main .main__content-inner .features-html-output th {
 	background-color: hsl(0, 0%, 96%);
 }
+
+/* Tabs navigation component */
+
+.tabs {
+	margin: 1.5em 0;
+
+	--tabs-active-background: hsl(0, 0%, 96%);
+	--tabs-active-border: hsl(0, 0%, 80%);
+}
+
+.tabs ul.tabs__list {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+}
+
+.tabs ul.tabs__list li {
+	margin: 0;
+	display: inline-block;
+	flex-grow: 1;
+	text-align: center;
+	border-top: 3px solid transparent;
+}
+
+.tabs ul.tabs__list li a.tabs__list__tab-text {
+	text-decoration: none;
+	color: initial;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 8px;
+}
+
+.tabs ul.tabs__list li.tabs__list__tab_selected {
+	background: var(--tabs-active-background);
+	border-top: 3px solid var(--tabs-active-border);
+}
+
+.tabs ul.tabs__list li.tabs__list__tab_selected a.tabs__list__tab-text {
+	font-weight: bold;
+}
+
+.tabs .tabs__panel {
+	padding: 1.333em;
+	display: none;
+	background: var(--tabs-active-background);
+}
+
+.tabs .tabs__panel.tabs__panel_selected {
+	display: block;
+}
+