feat(footer): language only for web component variations

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,45 @@ 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,
+    enableLanguageSelector,
+    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)}"
+            ?enable-language-selector="${enableLanguageSelector}"
+            language-selector-label="${languageSelectorLabel}"
+            selected-language="${selectedLanguage}"
           >
           </dds-footer-composite>
         `
@@ -39,9 +60,13 @@ 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)}"
+            ?enable-language-selector="${enableLanguageSelector}"
+            language-selector-label="${languageSelectorLabel}"
+            selected-language="${selectedLanguage}"
           >
           </dds-footer-container>
         `}
@@ -53,6 +78,19 @@ export const Default = ({ parameters }) => {
   props.FooterComposite = {
     ...(props.FooterComposite || {}),
     size: FOOTER_SIZE.REGULAR,
+    enableLanguageSelector: false,
+  };
+  return base({ parameters });
+};
+
+export const defaultLanguageOnly = ({ parameters }) => {
+  const { props = {} } = parameters;
+  props.FooterComposite = {
+    ...(props.FooterComposite || {}),
+    size: FOOTER_SIZE.REGULAR,
+    enableLanguageSelector: true,
+    languageSelectorLabel: 'Choose a language',
+    selectedLanguage: 'English',
   };
   return base({ parameters });
 };
@@ -62,15 +100,33 @@ export const short = ({ parameters }) => {
   props.FooterComposite = {
     ...(props.FooterComposite || {}),
     size: FOOTER_SIZE.SHORT,
+    enableLanguageSelector: false,
   };
   return base({ parameters });
 };
 
+export const shortDefaultLanguageOnly = ({ parameters }) => {
+  const { props = {} } = parameters;
+  props.FooterComposite = {
+    ...(props.FooterComposite || {}),
+    size: FOOTER_SIZE.SHORT,
+    enableLanguageSelector: true,
+    languageSelectorLabel: 'Choose a language',
+    selectedLanguage: 'English',
+  };
+  return html`
+    <div class="micro-container">
+      ${base({ parameters })}
+    </div>
+  `;
+};
+
 export const micro = ({ parameters }) => {
   const { props = {} } = parameters;
   props.FooterComposite = {
     ...(props.FooterComposite || {}),
     size: FOOTER_SIZE.MICRO,
+    enableLanguageSelector: false,
   };
   return html`
     <div class="micro-container">
@@ -90,6 +146,7 @@ export default {
       return {
         FooterComposite: {
           langDisplay: !useMock ? undefined : 'United States - English',
+          langList: mockLangList,
           legalLinks: !useMock ? undefined : mockLegalLinks,
           links: !useMock ? undefined : mockLinks,
           localeList: !useMock ? undefined : mockLocaleList,

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;
 
@@ -91,6 +93,13 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
    */
   _setLanguage?: (language: string) => void;
 
+  /**
+   * The placeholder for `setLanguage()` Redux action that may be mixed in.
+   *
+   * @internal
+   */
+  _languageCallback?: (e) => void;
+
   /**
    * The aria-label to use for the locale-button
    */
@@ -109,18 +118,44 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
   @property({ attribute: 'disable-locale-button' })
   disableLocaleButton = false;
 
+  /**
+   * `true` to enable language selector.
+   */
+  @property({ type: Boolean, attribute: 'enable-language-selector' })
+  enableLanguageSelector = false;
+
   /**
    * The language used for query.
    */
   @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.
+   */
+  @property({ attribute: 'language-selector-label' })
+  languageSelectorLabel?: string;
+
+  /**
+   * The initial selected language in the selector.
+   */
+  @property({ attribute: 'selected-language' })
+  selectedLanguage?: string;
+
   /**
    * The legal nav links.
    */
@@ -202,11 +237,16 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
     const {
       buttonLabel,
       disableLocaleButton,
+      enableLanguageSelector,
       langDisplay,
+      langList,
+      languageSelectorLabel,
+      selectedLanguage,
       size,
       links,
       legalLinks,
       _handleClickLocaleButton: handleClickLocaleButton,
+      _languageCallback: languageCallback,
     } = this;
     return html`
       <dds-footer size="${ifNonNull(size)}">
@@ -224,13 +264,25 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
             `
           )}
         </dds-footer-nav>
-        ${!disableLocaleButton && size !== FOOTER_SIZE.MICRO
+        ${!disableLocaleButton && size !== FOOTER_SIZE.MICRO && !enableLanguageSelector
           ? html`
               <dds-locale-button buttonLabel="${ifNonNull(buttonLabel)}" @click="${handleClickLocaleButton}"
                 >${langDisplay}</dds-locale-button
               >
             `
-          : html``}
+          : html`
+              <dds-language-selector
+                trigger-content="${languageSelectorLabel}"
+                value="${selectedLanguage}"
+                @bx-combo-box-selected="${languageCallback}"
+              >
+                ${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.