feat(footer): language only for web component variations

packages/web-components/src/components/footer/__stories__/language-list.ts

@@ -7,151 +7,43 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const languageList: Object[] = [
-  {
-    id: 'ar',
-    text: 'Arabic / عربية',
-  },
-  {
-    id: 'bs',
-    text: 'Bosnian / Bosanski',
-  },
-  {
-    id: 'bg',
-    text: 'Bulgarian / Български',
-  },
-  {
-    id: 'ca',
-    text: 'Catalan / Català',
-  },
-  {
-    id: 'zh',
-    text: 'Chinese Simplified / 简体中文',
-  },
-  {
-    id: 'zh-tw',
-    text: 'Chinese Traditional / 繁體中文',
-  },
-  {
-    id: 'hr',
-    text: 'Croatian / Hrvatski',
-  },
-  {
-    id: 'cs',
-    text: 'Czech / Čeština',
-  },
-  {
-    id: 'da',
-    text: 'Danish / Dansk',
-  },
-  {
-    id: 'nl',
-    text: 'Dutch / Nederlands',
-  },
-  {
-    id: 'en',
-    text: 'English',
-  },
-  {
-    id: 'fi',
-    text: 'Finnish / Suomi',
-  },
-  {
-    id: 'fr',
-    text: 'French / Français',
-  },
-  {
-    id: 'de',
-    text: 'German / Deutsch',
-  },
-  {
-    id: 'el',
-    text: 'Greek / Ελληνικά',
-  },
-  {
-    id: 'he',
-    text: 'Hebrew / עברית',
-  },
-  {
-    id: 'hu',
-    text: 'Hungarian / Magyar',
-  },
-  {
-    id: 'it',
-    text: 'Italian / Italiano',
-  },
-  {
-    id: 'ja',
-    text: 'Japanese / 日本語',
-  },
-  {
-    id: 'kk',
-    text: 'Kazakh / Қазақша',
-  },
-  {
-    id: 'ko',
-    text: 'Korean / 한국어',
-  },
-  {
-    id: 'mk',
-    text: 'Macedonian / македонски',
-  },
-  {
-    id: 'no',
-    text: 'Norwegian / Norsk',
-  },
-  {
-    id: 'pl',
-    text: 'Polish / polski',
-  },
-  {
-    id: 'pt-br',
-    text: 'Portuguese/Brazil/Brazil / Português/Brasil',
-  },
-  {
-    id: 'pt',
-    text: 'Portuguese/Portugal / Português/Portugal',
-  },
-  {
-    id: 'ro',
-    text: 'Romanian / Română',
-  },
-  {
-    id: 'ru',
-    text: 'Russian / Русский',
-  },
-  {
-    id: 'sr',
-    text: 'Serbian / srpski',
-  },
-  {
-    id: 'sk',
-    text: 'Slovak / Slovenčina',
-  },
-  {
-    id: 'sl',
-    text: 'Slovenian / Slovenščina',
-  },
-  {
-    id: 'es',
-    text: 'Spanish / Español',
-  },
-  {
-    id: 'sv',
-    text: 'Swedish / Svenska',
-  },
-  {
-    id: 'th',
-    text: 'Thai / ภาษาไทย',
-  },
-  {
-    id: 'tr',
-    text: 'Turkish / Türkçe',
-  },
-  {
-    id: 'vi',
-    text: 'Vietnamese / Tiếng Việt',
-  },
+const languageList: string[] = [
+  'Arabic / عربية',
+  'Bosnian / Bosanski',
+  'Bulgarian / Български',
+  'Catalan / Català',
+  'Chinese Simplified / 简体中文',
+  'Chinese Traditional / 繁體中文',
+  'Croatian / Hrvatski',
+  'Czech / Čeština',
+  'Danish / Dansk',
+  'Dutch / Nederlands',
+  'English',
+  'Finnish / Suomi',
+  'French / Français',
+  'German / Deutsch',
+  'Greek / Ελληνικά',
+  'Hebrew / עברית',
+  'Hungarian / Magyar',
+  'Italian / Italiano',
+  'Japanese / 日本語',
+  'Kazakh / Қазақша',
+  'Korean / 한국어',
+  'Macedonian / македонски',
+  'Norwegian / Norsk',
+  'Polish / polski',
+  'Portuguese/Brazil/Brazil / Português/Brasil',
+  'Portuguese/Portugal / Português/Portugal',
+  'Romanian / Română',
+  'Russian / Русский',
+  'Serbian / srpski',
+  'Slovak / Slovenčina',
+  'Slovenian / Slovenščina',
+  'Spanish / Español',
+  'Swedish / Svenska',
+  'Thai / ภาษาไทย',
+  'Turkish / Türkçe',
+  'Vietnamese / Tiếng Việt',
 ];
 
 export default languageList;

packages/web-components/src/components/footer/defs.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -26,3 +26,19 @@ export enum FOOTER_SIZE {
    */
   MICRO = 'micro',
 }
+
+/**
+ * The style scheme of language selector.
+ */
+export enum LANGUAGE_SELECTOR_STYLE_SCHEME {
+  /**
+   * Regular style scheme.
+   */
+  REGULAR = '',
+
+  /**
+   * The style scheme that's blendid into outer style scheme.
+   * The primary use case is for used in micro footer.
+   */
+  BLENDED = 'blended',
+}

packages/web-components/src/components/footer/footer-composite.ts

@@ -136,7 +136,7 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
    * @internal
    */
   @property({ attribute: false })
-  langList?: any[];
+  langList?: string[];
 
   /**
    * The language to show in the UI.
@@ -277,7 +277,7 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
                 @bx-combo-box-selected="${languageCallback}"
               >
                 ${langList?.map(
-                  ({ text: language }) => html`
+                  language => html`
                     <bx-combo-box-item value="${ifNonNull(language)}">${ifNonNull(language)}</bx-combo-box-item>
                   `
                 )}

packages/web-components/src/components/footer/language-selector.ts

@@ -7,13 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, customElement, query } from 'lit-element';
+import { html, property, customElement, query, internalProperty } from 'lit-element';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import BXComboBox, { DROPDOWN_SIZE } from 'carbon-web-components/es/components/combo-box/combo-box.js';
 import BXComboBoxItem from 'carbon-web-components/es/components/combo-box/combo-box-item.js';
 import HostListener from 'carbon-web-components/es/globals/decorators/host-listener.js';
 import HostListenerMixin from 'carbon-web-components/es/globals/mixins/host-listener.js';
-import { FOOTER_SIZE } from './footer';
+import { LANGUAGE_SELECTOR_STYLE_SCHEME } from './defs';
 import styles from './footer.scss';
 import { findIndex, forEach } from '../../globals/internal/collection-helpers';
 
@@ -30,11 +30,10 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
 class DDSLanguageSelector extends HostListenerMixin(BXComboBox) {
   /**
    * Property that saves the last valid language to use on reset cases.
-   * @private
    */
 
-  @property({ attribute: 'last-valid-lang' })
-  lastValidLang;
+  @internalProperty()
+  _lastValidLang?: string;
 
   @property()
   size = DROPDOWN_SIZE.EXTRA_LARGE;
@@ -44,7 +43,7 @@ class DDSLanguageSelector extends HostListenerMixin(BXComboBox) {
    */
 
   @property({ attribute: 'footer-size' })
-  footerSize = FOOTER_SIZE.REGULAR;
+  footerSize = LANGUAGE_SELECTOR_STYLE_SCHEME.REGULAR;
 
   /**
    * The `<input>` for filtering.
@@ -69,8 +68,8 @@ class DDSLanguageSelector extends HostListenerMixin(BXComboBox) {
   @HostListener('document:click')
   protected _handleClickOutside = e => {
     if (!this.contains(e.target as Node)) {
-      this._filterInputValue = this.lastValidLang;
-      this.filterInputNode.value = this.lastValidLang;
+      this._filterInputValue = this._lastValidLang as string;
+      this.filterInputNode.value = this._lastValidLang as string;
       this.open = false;
       this.requestUpdate(); // If the only change is to `_filterInputValue`, auto-update doesn't happen
     }
@@ -104,7 +103,7 @@ class DDSLanguageSelector extends HostListenerMixin(BXComboBox) {
       (item as BXComboBoxItem).highlighted = false;
       (item as BXComboBoxItem).selected = false;
     });
-    this.lastValidLang = this._filterInputValue;
+    this._lastValidLang = this._filterInputValue;
     this._filterInputValue = '';
     this.filterInputNode.focus();
     this.open = false;
@@ -131,13 +130,13 @@ class DDSLanguageSelector extends HostListenerMixin(BXComboBox) {
       this.open = false;
       this.requestUpdate();
     }
-    this.lastValidLang = item?.textContent as string;
+    this._lastValidLang = item?.textContent as string;
     (item as BXComboBoxItem).selected = true;
     super._handleUserInitiatedSelectItem(item);
   }
 
   render() {
-    this.lastValidLang = this.value;
+    this._lastValidLang = this.value;
     return html`
       ${super.render()}
     `;