feat(footer): language only for web component variations

packages/web-components/src/components/footer/__stories__/footer.stories.ts

@@ -45,7 +45,7 @@ export const base = ({ parameters }) => {
             language="${ifNonNull(language)}"
             lang-display="${ifNonNull(langDisplay)}"
             size="${ifNonNull(size)}"
-            languageList="${ifNonNull(langList)}"
+            lang-list="${ifNonNull(langList)}"
             .legalLinks="${ifNonNull(legalLinks)}"
             .links="${ifNonNull(links)}"
             .localeList="${ifNonNull(localeList)}"
@@ -60,7 +60,7 @@ export const base = ({ parameters }) => {
             language="${ifNonNull(language)}"
             lang-display="${ifNonNull(langDisplay)}"
             size="${ifNonNull(size)}"
-            languageList="${ifNonNull(langList)}"
+            lang-list="${ifNonNull(JSON.stringify(langList))}"
             .legalLinks="${ifNonNull(legalLinks)}"
             .links="${ifNonNull(links)}"
             .localeList="${ifNonNull(localeList)}"
@@ -146,7 +146,7 @@ export default {
       return {
         FooterComposite: {
           langDisplay: !useMock ? undefined : 'United States - English',
-          langList: !useMock ? undefined : mockLangList,
+          langList: mockLangList,
           legalLinks: !useMock ? undefined : mockLegalLinks,
           links: !useMock ? undefined : mockLinks,
           localeList: !useMock ? undefined : mockLocaleList,

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

@@ -130,8 +130,13 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
   @property()
   language?: string;
 
-  @property({ attribute: false })
-  langList?;
+  /**
+   * Placeholder list of languages to populate language selector
+   *
+   * @internal
+   */
+  @property({ attribute: 'lang-list' })
+  langList?: string;
 
   /**
    * The language to show in the UI.
@@ -244,14 +249,10 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
       _languageCallback: languageCallback,
     } = this;
 
-    console.log(languageSelectorLabel);
+    const parsedList = !langList ? undefined : JSON.parse(langList as string);
+
     return html`
-      <dds-footer
-        size="${ifNonNull(size)}"
-        enableLanguageSelector="${enableLanguageSelector}"
-        languageSelectorLabel="${languageSelectorLabel}"
-        selectedLanguage="${selectedLanguage}"
-      >
+      <dds-footer size="${ifNonNull(size)}">
         <dds-footer-logo></dds-footer-logo>
         <dds-footer-nav>
           ${links?.map(
@@ -275,11 +276,10 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
           : html`
               <dds-language-selector
                 trigger-content="${languageSelectorLabel}"
-                size="xl"
                 value="${selectedLanguage}"
                 @bx-combo-box-selected="${languageCallback}"
               >
-                ${langList?.map(
+                ${parsedList?.map(
                   ({ text: language }) => html`
                     <bx-combo-box-item value="${ifNonNull(language)}">${ifNonNull(language)}</bx-combo-box-item>
                   `

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

@@ -36,7 +36,6 @@ import {
   LocaleModalContainerActions,
 } from '../locale-modal/locale-modal-container';
 import DDSFooterComposite from './footer-composite';
-import languageList from './__stories__/language-list';
 
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
@@ -101,7 +100,6 @@ export function mapStateToProps(state: FooterContainerState): FooterContainerSta
       localeList: !language ? undefined : localeLists?.[language],
       links: !language ? undefined : translations?.[language]?.footerMenu,
       legalLinks: !language ? undefined : translations?.[language]?.footerThin,
-      langList: languageList,
     },
     value => value !== undefined
   );

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

@@ -9,7 +9,7 @@
 
 import { html, property, customElement, query } from 'lit-element';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import BXComboBox from 'carbon-web-components/es/components/combo-box/combo-box.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';
@@ -20,19 +20,25 @@ import { findIndex, forEach } from '../../globals/internal/collection-helpers';
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
 /**
- * Language selector
+ * Language selector component.
+ * The API for language selection is still subject to change.
  *
  * @element dds-language-selector
+ * @internal
  */
 @customElement(`${ddsPrefix}-language-selector`)
 class DDSLanguageSelector extends HostListenerMixin(BXComboBox) {
   /**
    * Property that saves the last valid language to use on reset cases.
+   * @private
    */
 
   @property({ attribute: 'last-valid-lang' })
   lastValidLang;
 
+  @property()
+  size = DROPDOWN_SIZE.EXTRA_LARGE;
+
   /**
    * Size property to apply different styles.
    */

packages/web-components/tests/snapshots/dds-footer-composite.md

@@ -5,7 +5,11 @@
 ####   `should render minimum attributes`
 
 ```
-<dds-footer-composite size="">
+<dds-footer-composite
+  language-selector-label="undefined"
+  selected-language="undefined"
+  size=""
+>
   <dds-footer
     data-autoid="dds--footer"
     role="footer"
@@ -39,6 +43,8 @@
 <dds-footer-composite
   lang-display="lang-display-foo"
   language="ko-KR"
+  language-selector-label="undefined"
+  selected-language="undefined"
   size=""
 >
   <dds-footer