From 62149265e95fcfeae1235f6800ed4d4e79157739 Mon Sep 17 00:00:00 2001 From: bwang Date: Tue, 7 Sep 2021 15:22:19 -0500 Subject: [PATCH] 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 +++++++++++++++++------- includes/templates/Button.mustache | 8 +++++ includes/templates/Icon.mustache | 3 -- includes/templates/StickyHeader.mustache | 24 ++++++------- stories/StickyHeader.stories.data.js | 19 ++++++---- 5 files changed, 67 insertions(+), 33 deletions(-) create mode 100644 includes/templates/Button.mustache delete mode 100644 includes/templates/Icon.mustache diff --git a/includes/SkinVector.php b/includes/SkinVector.php index 8a1c8d9ad..e664dc951 100644 --- a/includes/SkinVector.php +++ b/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]" ); diff --git a/includes/templates/Button.mustache b/includes/templates/Button.mustache new file mode 100644 index 000000000..c67b1607b --- /dev/null +++ b/includes/templates/Button.mustache @@ -0,0 +1,8 @@ +{{#href}} + {{{html-vector-button-icon}}} + {{label}} +{{#href}}{{/href}} +{{^href}}{{/href}} diff --git a/includes/templates/Icon.mustache b/includes/templates/Icon.mustache deleted file mode 100644 index 76997b6e7..000000000 --- a/includes/templates/Icon.mustache +++ /dev/null @@ -1,3 +0,0 @@ - -{{#label}}{{*}}{{/label}} - diff --git a/includes/templates/StickyHeader.mustache b/includes/templates/StickyHeader.mustache index 7f102b742..0cc6c2dbd 100644 --- a/includes/templates/StickyHeader.mustache +++ b/includes/templates/StickyHeader.mustache @@ -2,9 +2,9 @@ class="vector-sticky-header {{#is-visible}}vector-sticky-header-visible{{/is-visible}}">
- {{#data-icon-start}} - {{>Icon}} - {{/data-icon-start}} + {{#data-button-start}} + {{>Button}} + {{/data-button-start}}
{{title}}
@@ -13,17 +13,17 @@
- {{#data-icons}} - {{>Icon}} - {{/data-icons}} -
-
- {{primary-action}} + {{#data-buttons}} + {{>Button}} + {{/data-buttons}}
+ {{#data-primary-action}} + {{>Button}} + {{/data-primary-action}}
- {{#data-icon-end}} - {{>Icon}} - {{/data-icon-end}} + {{#data-button-end}} + {{>Button}} + {{/data-button-end}}
diff --git a/stories/StickyHeader.stories.data.js b/stories/StickyHeader.stories.data.js index eae6cbebc..207525857 100644 --- a/stories/StickyHeader.stories.data.js +++ b/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': `` + }, + '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 };