[DRAFT] feat(storefront): SD-11287 create Language Selector Component (UI implementation)

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Create Language Selector Component (UI implementation) [#2562](https://github.com/bigcommerce/cornerstone/pull/2562)
 - Add net-new "order.pickup_addresses" to unify objects used on Order Details and Order Invoice pages [#2557](https://github.com/bigcommerce/cornerstone/pull/2557)
 
 ## 6.16.2 (06-18-2025)

assets/scss/components/stencil/navUser/_navUser.scss

@@ -101,7 +101,8 @@
 }
 
 .navUser-action--currencySelector + .dropdown-menu,
-.navUser-action--channelSelector + .dropdown-menu {
+.navUser-action--channelSelector + .dropdown-menu,
+.navUser-action--languageSelector + .dropdown-menu {
     &::before {
         left: auto !important; // 6
         right: spacing("half"); // 6

config.json

@@ -67,6 +67,33 @@
       }
     ],
     "show_channels": false,
+    "language_selector_mock_data": {
+      "locales": [
+        {
+          "is_default": true,
+          "is_selected": true,
+          "code": "en",
+          "name": "English",
+          "path": "/en"
+        },
+        {
+          "is_default": false,
+          "is_selected": false,
+          "code": "fr",
+          "name": "Français",
+          "path": "/fr"
+        },
+        {
+          "is_default": false,
+          "is_selected": false,
+          "code": "fr",
+          "name": "Español (Perú)",
+          "path": "/es-pe"
+        }
+      ],
+      "selected_locale_name": "English"
+    },
+    "show_language_selector_mock_data": false,
     "hide_breadcrumbs": false,
     "hide_page_heading": false,
     "hide_category_page_heading": false,

lang/en.json

@@ -145,6 +145,8 @@
         "currency_switch_promotion" : "Promotions and gift certificates that don't apply to the new currency will be removed from your cart. Are you sure you want to continue?",
         "channel": "Store: {code}",
         "channel_switch_warning" : "Warning text for store switching",
+        "locale_switch_warning" : "Warning text for language switching",
+        "locale": "Language: {name}",
         "newsletter_signup": "Register for our newsletter",
         "form_submit": "Submit",
         "no_preference": "No Preference",

schema.json

@@ -720,6 +720,11 @@
         "label": "i18n.ChannelSelector",
         "id": "show_channels"
       },
+      {
+        "type": "checkbox",
+        "label": "i18n.languageSelector",
+        "id": "show_channels"
+      },
       {
         "type": "color",
         "label": "i18n.TextColor",

schemaTranslations.json

@@ -1652,6 +1652,9 @@
     "pl": "Selektor witryny sklepu",
     "ja": "ストアフロントセレクターを表示"
   },
+  "i18n.languageSelector": {
+    "default": "Show language selector"
+  },
   "i18n.TextColor": {
     "default": "Text color",
     "fr": "Couleur du texte",

templates/components/common/language-selector-mobile.html

@@ -0,0 +1,34 @@
+<a class="navPages-action has-subMenu"
+   href="#"
+   data-collapsible="navPages-locale"
+   aria-controls="navPages-locale"
+   aria-expanded="false"
+   aria-label="{{lang 'common.locale' name=theme_settings.language_selector_mock_data.selected_locale_name}}"
+>
+    {{lang 'common.locale' name=theme_settings.language_selector_mock_data.selected_locale_name}}
+    <i class="icon navPages-action-moreIcon" aria-hidden="true">
+        <svg>
+            <use href="#icon-chevron-down"></use>
+        </svg>
+    </i>
+</a>
+<div class="navPage-subMenu" id="navPages-locale" aria-hidden="true" tabindex="-1">
+    <ul class="navPage-subMenu-list">
+        {{#each theme_settings.language_selector_mock_data.locales}}
+            <li class="navPage-subMenu-item">
+                <a class="navPage-subMenu-action navPages-action"
+                   href="{{path}}"
+                   data-locale-code="{{{code}}}"
+                   data-warning="{{lang 'common.locale_switch_warning'}}"
+                   aria-label="{{name}}"
+                >
+                    {{#if is_selected}}
+                        <strong>{{name}}</strong>
+                    {{else}}
+                        {{name}}
+                    {{/if}}
+                </a>
+            </li>
+        {{/each}}
+    </ul>
+</div>

templates/components/common/language-selector.html

@@ -0,0 +1,35 @@
+<ul class="navUser-section">
+    <li class="navUser-item">
+        <a class="navUser-action navUser-action--languageSelector has-dropdown"
+           href="#"
+           data-dropdown="languageSelection"
+           aria-controls="languageSelection"
+           aria-expanded="false"
+           aria-label="{{lang 'common.locale' name=theme_settings.language_selector_mock_data.selected_locale_name}}"
+        >
+            {{lang 'common.locale' name=theme_settings.language_selector_mock_data.selected_locale_name}}
+            <i class="icon" aria-hidden="true">
+                <svg>
+                    <use href="#icon-chevron-down" />
+                </svg>
+            </i>
+        </a>
+        <ul class="dropdown-menu" id="languageSelection" data-dropdown-content aria-hidden="true" tabindex="-1">
+            {{#each theme_settings.language_selector_mock_data.locales}}
+                <li class="dropdown-menu-item">
+                    <a href="{{path}}"
+                       data-locale-code="{{code}}"
+                       data-warning="{{lang 'common.locale_switch_warning'}}"
+                       aria-label="{{name}}"
+                    >
+                        {{#if is_selected}}
+                            <strong>{{name}}</strong>
+                        {{else}}
+                            {{name}}
+                        {{/if}}
+                    </a>
+                </li>
+            {{/each}}
+        </ul>
+    </li>
+</ul>

templates/components/common/navigation-menu.html

@@ -27,6 +27,13 @@
         {{/unless}}
     </ul>
     <ul class="navPages-list navPages-list--user">
+        {{#if theme_settings.show_language_selector_mock_data}}
+            {{#if theme_settings.language_selector_mock_data.locales.length '>' 1}}
+                <li class="navPages-item">
+                    {{> components/common/language-selector-mobile}}
+                </li>
+            {{/if}}
+        {{/if}}
         {{#if currency_selector.currencies.length '>' 1}}
             <li class="navPages-item">
                 <a class="navPages-action has-subMenu"

templates/components/common/navigation.html

@@ -1,4 +1,10 @@
 <nav class="navUser">
+    {{#if theme_settings.show_language_selector_mock_data}}
+        {{#if theme_settings.language_selector_mock_data.locales.length '>' 1}}
+            {{> components/common/language-selector}}
+        {{/if}}
+    {{/if}}
+
     {{#or customer (unless settings.hide_price_from_guests)}}
         {{> components/common/currency-selector}}
     {{/or}}