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
This commit is contained in:
bwang 2021-09-07 15:22:19 -05:00
parent e33d2aa335
commit 62149265e9
5 changed files with 67 additions and 33 deletions

View File

@ -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]" );

View File

@ -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}}

View File

@ -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>

View File

@ -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>

View File

@ -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 };