feat(footer): language only for web component variations (#4772)

### Related Ticket(s)

#4706

### Description

Introduced the Regular/Short variations of the footer with the Language Selector in Web Components.

### Changelog

**New**

- `<dds-language-selector>` introduced, extended from `<bx-combo-box>`

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/web-components/src/components/footer/__stories__/README.stories.mdx

@@ -51,4 +51,42 @@ See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/t
 | `<dds-legal-nav>`        | `data-autoid="dds--legal-nav"`         | Component   |
 | `<dds-legal-nav-cookie-preferences-placeholder>` | `data-autoid="dds--privacy-cp"`        | Component   |
 
+### Language selector
+
+The option to use a language selector is available in lieu of the locale
+button/selector.
+
+The following attributes are needed:
+
+| Attribute                | Description                            |
+| ------------------------ | -------------------------------------- |
+| `language-selector-label`| `The input box placeholder`            |
+| `selected-language`      | `The initial selected language`        |
+| `localeList`             | `Object containing available languages`|
+
+Example implementation:
+
+```javascript
+const languageList = [
+  { id: 'da', text: 'Danish / Dansk' },
+  { id: 'nl', text: 'Dutch / Nederlands' },
+  { id: 'en', text: 'English' },
+];
+
+```
+
+```html
+<dds-footer-container
+	language="${ifNonNull(language)}"
+	lang-display="${ifNonNull(langDisplay)}"
+	size="${ifNonNull(size)}"
+  .localeList="${ifNonNull(languageList)}"
+	.legalLinks="${ifNonNull(legalLinks)}"
+	.links="${ifNonNull(links)}"
+	.localeList="${ifNonNull(localeList)}"
+	language-selector-label="${ifNonNull(languageSelectorLabel)}"
+	selected-language="${ifNonNull(selectedLanguage)}"
+>
+</dds-footer-container>
+```
 <Description markdown={contributing} />

packages/web-components/src/components/footer/__stories__/footer.stories.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.
@@ -13,24 +13,34 @@ import inPercy from '@percy-io/in-percy';
 import { FOOTER_SIZE } from '../footer';
 import '../footer-composite';
 import '../footer-container';
+import mockLangList from './language-list';
 import mockLinks from './links';
 import mockLegalLinks from './legal-links';
 import mockLocaleList from '../../locale-modal/__stories__/locale-data.json';
 import readme from './README.stories.mdx';
+import styles from './footer.stories.scss';
 
 export const base = ({ parameters }) => {
-  const { langDisplay, language, size, legalLinks, links, localeList } = parameters?.props?.FooterComposite ?? {};
+  const { langDisplay, language, size, langList, legalLinks, links, localeList, languageSelectorLabel, selectedLanguage } =
+    parameters?.props?.FooterComposite ?? {};
   const { useMock } = parameters?.props?.Other ?? {};
+
   return html`
+    <style>
+      ${styles}
+    </style>
     ${useMock
       ? html`
           <dds-footer-composite
             language="${ifNonNull(language)}"
             lang-display="${ifNonNull(langDisplay)}"
             size="${ifNonNull(size)}"
+            .langList="${ifNonNull(langList)}"
             .legalLinks="${ifNonNull(legalLinks)}"
             .links="${ifNonNull(links)}"
             .localeList="${ifNonNull(localeList)}"
+            language-selector-label="${ifNonNull(languageSelectorLabel)}"
+            selected-language="${ifNonNull(selectedLanguage)}"
           >
           </dds-footer-composite>
         `
@@ -39,9 +49,12 @@ export const base = ({ parameters }) => {
             language="${ifNonNull(language)}"
             lang-display="${ifNonNull(langDisplay)}"
             size="${ifNonNull(size)}"
+            .langList="${ifNonNull(langList)}"
             .legalLinks="${ifNonNull(legalLinks)}"
             .links="${ifNonNull(links)}"
             .localeList="${ifNonNull(localeList)}"
+            language-selector-label="${ifNonNull(languageSelectorLabel)}"
+            selected-language="${ifNonNull(selectedLanguage)}"
           >
           </dds-footer-container>
         `}
@@ -53,6 +66,19 @@ export const Default = ({ parameters }) => {
   props.FooterComposite = {
     ...(props.FooterComposite || {}),
     size: FOOTER_SIZE.REGULAR,
+    langList: '',
+  };
+  return base({ parameters });
+};
+
+export const defaultLanguageOnly = ({ parameters }) => {
+  const { props = {} } = parameters;
+  props.FooterComposite = {
+    ...(props.FooterComposite || {}),
+    size: FOOTER_SIZE.REGULAR,
+    languageSelectorLabel: 'Choose a language',
+    selectedLanguage: 'English',
+    langList: mockLangList,
   };
   return base({ parameters });
 };
@@ -62,10 +88,27 @@ export const short = ({ parameters }) => {
   props.FooterComposite = {
     ...(props.FooterComposite || {}),
     size: FOOTER_SIZE.SHORT,
+    langList: '',
   };
   return base({ parameters });
 };
 
+export const shortDefaultLanguageOnly = ({ parameters }) => {
+  const { props = {} } = parameters;
+  props.FooterComposite = {
+    ...(props.FooterComposite || {}),
+    size: FOOTER_SIZE.SHORT,
+    languageSelectorLabel: 'Choose a language',
+    selectedLanguage: 'English',
+    langList: mockLangList,
+  };
+  return html`
+    <div class="micro-container">
+      ${base({ parameters })}
+    </div>
+  `;
+};
+
 export const micro = ({ parameters }) => {
   const { props = {} } = parameters;
   props.FooterComposite = {

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ *
+ * 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.
+ */
+
+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

@@ -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.
@@ -35,6 +35,8 @@ import './locale-button';
 import './legal-nav';
 import './legal-nav-item';
 import './legal-nav-cookie-preferences-placeholder';
+import './language-selector';
+import 'carbon-web-components/es/components/combo-box/combo-box-item';
 
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
@@ -115,12 +117,36 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
   @property()
   language?: string;
 
+  /**
+   * Placeholder list of languages to populate language selector
+   *
+   * @internal
+   */
+  @property({ attribute: false })
+  langList?: string[];
+
   /**
    * The language to show in the UI.
    */
   @property({ attribute: 'lang-display' })
   langDisplay?: string;
 
+  /**
+   * The placeholder label for language selector.
+   *
+   * @internal
+   */
+  @property({ attribute: 'language-selector-label' })
+  languageSelectorLabel?: string;
+
+  /**
+   * The initial selected language in the selector.
+   *
+   * @internal
+   */
+  @property({ attribute: 'selected-language' })
+  selectedLanguage?: string;
+
   /**
    * The legal nav links.
    */
@@ -203,6 +229,9 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
       buttonLabel,
       disableLocaleButton,
       langDisplay,
+      langList,
+      languageSelectorLabel,
+      selectedLanguage,
       size,
       links,
       legalLinks,
@@ -224,13 +253,21 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
             `
           )}
         </dds-footer-nav>
-        ${!disableLocaleButton && size !== FOOTER_SIZE.MICRO
+        ${!disableLocaleButton && size !== FOOTER_SIZE.MICRO && !langList
           ? html`
               <dds-locale-button buttonLabel="${ifNonNull(buttonLabel)}" @click="${handleClickLocaleButton}"
                 >${langDisplay}</dds-locale-button
               >
             `
-          : html``}
+          : html`
+              <dds-language-selector trigger-content="${languageSelectorLabel}" value="${selectedLanguage}">
+                ${langList?.map(
+                  language => html`
+                    <bx-combo-box-item value="${ifNonNull(language)}">${ifNonNull(language)}</bx-combo-box-item>
+                  `
+                )}
+              </dds-language-selector>
+            `}
         <dds-legal-nav size="${ifNonNull(size)}">
           ${legalLinks?.map(
             ({ title, url }) => html`

packages/web-components/src/components/footer/footer-container.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.