Add ULS to sticky header

- Rework Icon template into Button template to support all button variants
- Update ULS helper functions in SkinVector
- Update StickyHeader template to use the new Button template
- Update Storybook

Bug: T289815
Depends-on: Iba6cbbd6c6e48a1abfda342421822e3ff2715362
Change-Id: I718b3e05a988e20beb82d599e4168d497fa4c299

includes/SkinVector.php

@@ -46,6 +46,7 @@ class SkinVector extends SkinMustache {
 	private const MENU_TYPE_PORTAL = 3;
 	private const NO_ICON = [
 		'icon' => 'none',
+		'is-quiet' => true,
 		'class' => 'sticky-header-icon'
 	];
 
@@ -309,10 +310,10 @@ class SkinVector extends SkinMustache {
 		return [
 			'title' => 'Audre Lorde',
 			'heading' => 'Introduction',
-			'primary-action' => 'Primary action',
-			'data-icon-start' => self::NO_ICON,
-			'data-icon-end' => self::NO_ICON,
-			'data-icons' => [
+			'data-primary-action' => !$this->shouldHideLanguages() ? $this->getULSButtonData() : '',
+			'data-button-start' => self::NO_ICON,
+			'data-button-end' => self::NO_ICON,
+			'data-buttons' => [
 				self::NO_ICON, self::NO_ICON, self::NO_ICON, self::NO_ICON
 			]
 		];
@@ -500,20 +501,41 @@ class SkinVector extends SkinMustache {
 	}
 
 	/**
-	 * Combines class and other HTML data required to create the button
-	 * for the languages in header feature with the existing language portletData.
+	 * Returns ULS button label
 	 *
-	 * @param array $portletData returned by SkinMustache
-	 * @return array enhanced $portletData
+	 * @return string
 	 */
-	private function createULSLanguageButton( $portletData ) {
+	private function getULSLabel() {
 		$label = $this->msg( 'vector-language-button-label' )
 			->numParams( count( $this->getLanguagesCached() ) )
 			->escaped();
+		return $label;
+	}
 
+	/**
+	 * Creates button data for the ULS button in the sticky header
+	 *
+	 * @return array
+	 */
+	private function getULSButtonData() {
+		return [
+			'id' => 'p-lang-btn-sticky-header',
+			'class' => 'mw-interlanguage-selector',
+			'is-quiet' => true,
+			'label' => $this->getULSLabel(),
+			'html-vector-button-icon' => Hooks::makeIcon( 'wikimedia-language' ),
+		];
+	}
+
+	/**
+	 * Creates portlet data for the ULS button in the header
+	 *
+	 * @return array
+	 */
+	private function getULSPortletData() {
 		$languageButtonData = [
 			'id' => 'p-lang-btn',
-			'label' => $label,
+			'label' => $this->getULSLabel(),
 			// ext.uls.interface attaches click handler to this selector.
 			'checkbox-class' => ' mw-interlanguage-selector ',
 			'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language' ),
@@ -528,7 +550,7 @@ class SkinVector extends SkinMustache {
 			$languageButtonData['class'] = ' mw-portlet-empty';
 		}
 
-		return array_merge( $portletData, $languageButtonData );
+		return $languageButtonData;
 	}
 
 	/**
@@ -574,7 +596,7 @@ class SkinVector extends SkinMustache {
 		}
 
 		if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) {
-			$portletData = $this->createULSLanguageButton( $portletData );
+			$portletData = array_merge( $portletData, $this->getULSPortletData() );
 		}
 		$class = $portletData['class'];
 		$portletData['class'] = trim( "$class $extraClasses[$type]" );

includes/templates/Button.mustache

@@ -0,0 +1,8 @@
+{{#href}}<a href="{{.}}"{{/href}}
+{{^href}}<button{{/href}}
+	id="{{id}}"
+	class="mw-ui-button {{#is-quiet}}mw-ui-quiet{{/is-quiet}} {{#icon}}mw-ui-icon mw-ui-icon-element mw-ui-icon-{{.}}{{/icon}} {{class}}">
+	{{{html-vector-button-icon}}}
+	<span>{{label}}</span>
+{{#href}}</a>{{/href}}
+{{^href}}</button>{{/href}}

includes/templates/Icon.mustache

@@ -1,3 +0,0 @@
-<a {{#href}}href="{{.}}"{{/href}} class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-{{icon}} {{class}}">
-{{#label}}<span>{{*}}</span>{{/label}}
-</a>

includes/templates/StickyHeader.mustache

@@ -2,9 +2,9 @@
 	class="vector-sticky-header {{#is-visible}}vector-sticky-header-visible{{/is-visible}}">
 	<div class="vector-sticky-header-start">
 		<div class="vector-sticky-header-icon-start">
-			{{#data-icon-start}}
-			{{>Icon}}
-			{{/data-icon-start}}
+			{{#data-button-start}}
+			{{>Button}}
+			{{/data-button-start}}
 		</div>
 		<div class="vector-sticky-header-context-bar">
 			<div class="vector-sticky-header-context-bar-primary">{{title}}</div>
@@ -13,17 +13,17 @@
 	</div>
 	<div class="vector-sticky-header-end">
 		<div class="vector-sticky-header-icons">
-			{{#data-icons}}
-			{{>Icon}}
-			{{/data-icons}}
-		</div>
-		<div class="mw-ui-button">
-			{{primary-action}}
+			{{#data-buttons}}
+			{{>Button}}
+			{{/data-buttons}}
 		</div>
+		{{#data-primary-action}}
+		{{>Button}}
+		{{/data-primary-action}}
 		<div class="vector-sticky-header-icon-end">
-			{{#data-icon-end}}
-			{{>Icon}}
-			{{/data-icon-end}}
+			{{#data-button-end}}
+			{{>Button}}
+			{{/data-button-end}}
 		</div>
 	</div>
 </header>

stories/StickyHeader.stories.data.js

@@ -1,25 +1,32 @@
 import template from '!!raw-loader!../includes/templates/StickyHeader.mustache';
-import Icon from '!!raw-loader!../includes/templates/Icon.mustache';
+import Button from '!!raw-loader!../includes/templates/Button.mustache';
 
 const NO_ICON = {
 	icon: 'none',
+	'is-quiet': true,
 	class: 'sticky-header-icon'
 };
 
 const data = {
 	title: 'Audre Lorde',
 	heading: 'Introduction',
-	'primary-action': 'Primary action',
 	'is-visible': true,
-	'data-icon-start': NO_ICON,
-	'data-icon-end': NO_ICON,
-	'data-icons': [
+	'data-primary-action': {
+		id: 'p-lang-btn-sticky-header',
+		class: 'mw-interlanguage-selector',
+		'is-quiet': true,
+		label: '196 languages',
+		'html-vector-button-icon': `<span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span>`
+	},
+	'data-button-start': NO_ICON,
+	'data-button-end': NO_ICON,
+	'data-buttons': [
 		NO_ICON, NO_ICON, NO_ICON, NO_ICON
 	]
 };
 
 export const STICKY_HEADER_TEMPLATE_PARTIALS = {
-	Icon
+	Button
 };
 
 export { template, data };